تقليم الخبز

Question

أنا أعاني حاليًا من مشكلة تقليص التنقل في الخبز حتى لا يدمر تصميم موقعي.

المشكلة هي ما يلي: يحتوي ملاحة الخبز على عرض ثابت (دعنا نقول 900 بكسل) - لذا ، إذا كان المستخدم ينتقل إلى عنصر ينتج عنه موقعه في خبز أكبر من 900 بكسل ، فسوف يتعين على تقليمه لتناسبه التصميم.

لذا ، الجزء الذي أكون عالقًا هو: كيف يمكنني أن أقرر مقدار ما يجب تقليمه ومكان تقليمه؟ لقد اكتشفت أنه يمكنني فقط تقليم تدفق النص في منتصف الخبز ، لذلك سيؤدي ذلك

البعض> الملاحة> هذا> ...> هو> أيضا> طويل

ولكن كيف يمكنني أن أقرر مكان القطع؟ وكيف سأكون قادرًا على الحفاظ على مراسي العناصر من القطع؟!

أنا عالق حقًا في هذا ، هل هناك أي طريقة مقبولة للتعامل مع مثل هذه القضايا؟!

Answer 1

احتفظ بعنصر الجذر ، قم بإزالة العناصر التالية حتى يناسب الخبز. أنا أوصيك فعليًا بالقيام بذلك في JavaScript ، حيث سيكون لديك طرق لحساب عرض البكسل الخاص بـ Breadcrumb ، بينما يجب عليك استخدام عدد ثابت من الأحرف كنقطة استراحة مما قد يؤدي دائمًا أطوال مختلفة. سيكون استخدام JS أفضل على أي حال لكبار المسئولين الاقتصاديين ، وذلك لأن الروابط ستظل موجودة ، فقط مخفية.

على افتراض أن لديك عنصر قائمة بسيط مثل خبزك:

<ul id="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/products/">Products</a></li>
    <li><a href="/products/hats/">Hats</a></li>
    <li><a href="/products/hats/large/">Large</a></li>
    <li><a href="/products/hats/large/red/">Red</a></li>
    <li><a href="/products/hats/large/red/round/">Round</a></li>
</ul>

يمكنك بعد ذلك تقليم الطول مثل هذا (باستخدام jQuery):

if($('#breadcrumb').width() > 900) {
    $('#breadcrumb li:first').after('<li>...</li>');

    while($('#breadcrumb').width() > 900) {    
        $('#breadcrumb li').eq(2).remove();
    }
}

مثال بسيط وربما لا يعمل ، ولكن يجب أن يعطيك بعض الأفكار.

راجع للشغل ، إذا كنت ترغب في القيام بالتشذيب في PHP ، فيجب عليك القيام بذلك عندما يتم تشكيل خبز الخبز إذا كنت تريد أن تبقيه بسيطًا. إذا بدأت القطع بعد ذلك ، فيجب عليك اللجوء إلى بعض التعبيرات المعقدة المعقدة أو إلى تضمين نوع من محلل DOM في مشروعك للحفاظ على علامات المرساة سليمة.

Answer 2

أنا أدرك أن حلي أكثر توجهاً نحو التصميم من البرمجة ، لكن شخصياً ، لن أقلب فتات الخبز. بدلاً من ذلك ، إذا تجاوز محتوى فتات الخبز 900 بكسل ، فسأقوم بتراكب PNG الذي ينتقل من الشفافية الكاملة إلى الشفافية الكاملة وجعله يبدو وكأنه الجزء الأول من فتات الخبز يتلاشى. ثم مع jQuery ، كنت أرفع فتات الخبز إما إلى اليسار أو يمينًا ، اعتمادًا على موضع الماوس فوقه (استنادًا إلى النسبة المئوية من يسار الهامش الأيمن ، حيث يكون المركز إما 0 ٪ أو 100 ٪). بنفس الطريقة ، أود بعد ذلك استخدام نسخة مقلوبة من نفس صورة PNG شفافة على الجانب الأيمن ، لأنه عندما يكون المؤشر أقرب إلى الهامش الأيسر.

إليك مثال لتوضيح ما أقوله بشكل أفضل:

أتمنى أن يساعدك هذا !

Answer 3

على افتراض أنك لا تريد أن تقوم فتات الخبز باستراحة عند الوصول إلى النهاية ، إليك ما تفعله.

استخدم وظيفة تقطع الكلمات التي تكون طويلة جدًا. لذا اتخذ قرارًا بمدة الوقت الأطول. بعد نقطة معينة بدلاً من الاستمرار في عرضها ، تقوم عادةً ... في نهاية الكلمة وتستمر إلى الجزء التالي من Breadcrumb.

ألق نظرة على هذه الصفحة.

http://www.the-art-of-web.com/php/truncate/

Answer 4

تاتو أولمانن لديه فكرة جيدة. لكن المظهر يجب أن تحل محل لي بالانتفاخ. في وقت لاحق لن تملأ خط كامل. المرجع حساب عرض النص مع JavaScript