منع فواصل الأسطر في عناصر القائمة باستخدام CSS

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

الحل 1: خاصية المساحة البيضاء

تتيح لك خاصية المساحة البيضاء التحكم في كيفية التعامل مع المساحة البيضاء داخل العنصر. . من خلال تعيين white-space: nowrap; على علامة li، يمكنك منع الرابط من الالتفاف:

li {
  white-space: nowrap;
}

الحل 2: زيادة عرض عنصر القائمة

إذا كنت لا ترغب في إزالة كل المساحة البيضاء، فيمكنك زيادة عرض علامة li. وهذا يمنح الرابط مساحة أكبر ليتناسب مع سطر واحد:

li {
  width: 200px;
}

يعمل كلا الحلين على منع التفاف الرابط بشكل فعال مع الحفاظ على سهولة قراءة القائمة.