العدد الفائض من breadcrumb

Question

قد وجدت برنامج تعليمي للخضاع CSS3 وجعل بعض التعديلات إليها (على الرغم من أن إصدار البرنامج التعليمي كان له نفس المشكلة)، ووجدت أنه إذا ذهبت فتات الخبز على سطر جديد، فسوف تفشل بشكل كبير بسبب استخدام الفائض: مخفي لإخفاء العناصر الزائفة ...

html

giveacodicetagpre.

css

giveacodicetagpre.

هنا هو الكمان ... http://jsfiddle.net/kggnb/40/

حاولت إجراء تغييرات على CSS لإصلاح هذا ولكن لا يبدو أن نرى طريقة لتغيير العناصر الزائفة دون تكوينها بشكل أضيق، ولكن هذا يعني أيضا وجود نقاط مدبب للغاية.

يتم تقديم HTML على الخادم، وأفضل الحلول التي يمكنني التفكير فيها في بعض الشيكات قبل تقديمها للتحقق من عدد العناصر التي سيتم إنشاؤها، ثم قم فقط بإلقاء أي من السابقين الذين تجاوزوا حجم شاشة معينة داخل قائمة جديدة وتبدأ في كل مرة يضرب هذا العرض.

فكرة أخرى جاء أحد الزملاء باستخدام صورة للنقاط، لكنني أفضل التمسك بإصلاح CSS إذا كان ذلك ممكنا.

أي أفكار / إصلاحات أخرى؟

شكرا.

تحديث - آسف، سوف توضح. لا أريد أن تظهر الأسهم على الإطلاق، ستظهر الإصدار الصحيح من Breadcrumbs مثل هذا. http://jsfiddle.net/kggnb/49/

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

يمكنني استخدام skew، ولكن بعد ذلك لن يعمل في IE8.

Answer 1

http://jsfiddle.net/kggnb/50/

مجرد جعل السهم أصغر، إليك التغييرات:

giveacodicetagpre.