العناصر مع Nowrap تتعلق بالعناصر المجاورة في WebKit

Question

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

First entry in the menu Second menu entry
These words are short, the LI jumps lines, but doesn't wrap
Yet anoter] [And more] [Some more]

منطقيا ، كنت فقط وضعت li {white-space:nowrap;}, ، ولكن هناك مشكلة في متصفحات WebKit. العناصر مع Nowrap تتعلق بالعناصر المجاورة. لذلك في الحالة أعلاه ، كل ما li سيكون على نفس الخط.

الشيء نفسه ينطبق على عنصر معزول مع nowrap داخل كتلة نص التفاف.

<p>Visit my sites <a href="http://gabrielradic.com/" style="white-space:nowrap">Gabriel Radic
.com (English)</a> or <a href="http://www.timbru.com/" style="white-space:nowrap">Timbru Blog
(Romanian)</a>.

ما أتوقعه هو شيء مثل:

قم بزيارة المواقع الخاصة بي غابرييل راديك .com أو
مدونة تيمبرو

بدلاً من ذلك ، ينتهي الرابطان ببعضهما البعض ، مثل:

قم بزيارة المواقع الخاصة بي
غابرييل راديك .com أو مدونة تيمبرو (روماني)

هل هناك طريقة لطيفة لإخبار Safari و Chrome وآخرون بالتوقف عن الاستيلاء على كوع الناس؟

شكرا لمساعدتك.

Answer 1

بدلا من استخدام white-space:nowrap, ، في هذه الحالة ، من الأنسب الذهاب مع display:inline-block.

يجب تكييف CSS هنا وهناك للتغيير ، لكنه يعمل كما هو متوقع.

Answer 2

لذلك إذا فهمت بشكل صحيح ، فأنت تريد أن يلف النص داخل عناصر القائمة ، ولكن ليس القائمة نفسها ، هل هذا صحيح؟ بحيث يبدو شيئًا مثل:

item one | item two | item number | item four 
                         three

لكن لا يبدو الأمر وكأنه:

item one | item two | item number three | 
item four 

إذا كان هذا هو الحال ، هل حاولت ضبط nowrap على الفعلي ul بدلاً من عناصر القائمة ، لأنها ul أنك تحاول أن تجعل الالتفاف؟ ثم قم بتعيين عرض لعناصر القائمة بحيث يلفها لتناسب هذا العرض.