| الخاصية أو القيمة | طريقة العمل والتأثير البرمجي | الاستخدام الشائع وملاحظة الأداء والنظام |
|---|---|---|
| line-height | يحدد المساحة العمودية الفاصلة بين أسطر الفقرة النصية الواحدة | يفضل استخدام قيم بلا وحدات مثل 1.6 لضمان حسابها نسبياً من حجم الخط وهي ضرورية جداً لراحة عين القارئ وسلاسة القراءة لنوفيل |
| normal | القيمة القياسية للمتصفح حيث يلتف النص عند نهاية السطر ويدمج المسافات الزائدة في مسافة واحدة | التنسيق التلقائي المعتمد للمقالات والفقرات العادية في كل المواقع |
| nowrap | يجبر النص بالكامل على البقاء في سطر واحد مستمر ويمنعه من النزول لأسفل مهما طال | يستخدم لتنسيق عناصر القوائم العلوية أو نصوص الأزرار لمنع تشوه مظهرها البصري |
| pre | يعرض النص تماماً كما كتبته في محرر الأكواد محتفظاً بكل الفراغات ونزلات الأسطر دون إهمالها | ممتاز لعرض نصوص برمجية أو قصائد شعرية تحتاج لتنسيق خاص وثابت |
| pre-wrap | يدمج بين ميزة الحفاظ على المسافات والفواصل المكتوبة وبين السماح للنص بالالتفاف والنزول للأسفل | يضمن عدم خروج النصوص الطويلة جداً عن حدود شاشة المستخدم والحفاظ على تنظيمها |
| pre-line | يتجاهل المسافات الفارغة المتعددة لكنه يحافظ على قفزات ونزلات الأسطر الجديدة التي ضغطت عليها بالمحرر | يتيح كتابة فقرات متباعدة بشكل طبيعي مع دمج الفراغات غير الضرورية تلقائياً |
| word-break | يتحكم في كيفية تصرف المتصفح عند اصطدام كلمة واحدة طويلة جداً بنهاية الصندوق | يقبل القيمة break-all لقص الكلمة في أي حرف كان أو القيمة keep-all لمنع القص في لغات معينة والأكواد |
| overflow-wrap | يبحث عن الكلمات الطويلة التي قد تخرج عن إطار التصميم ويكسرها فقط عند الضرورة لحماية التخطيط | استخدام القيمة break-word يعتبر الخيار الأفضل والآمن لمنع تدمير شكل بطاقات المقالات بسبب الروابط الطويلة جداً |
**line-height (ارتفاع السطر):** المسافة العمودية بين أسطر النص. - القيمة الموصى بها: بين 1.5 و 1.8 لنصوص الجسم. - استخدم قيماً بلا وحدات (1.6) لأنها تُحسب نسبياً من حجم الخط.
**white-space:** يتحكم في تعامل المتصفح مع المسافات والفواصل: - `normal` — الافتراضي، يلتف النص ويتجاهل المسافات المتعددة - `nowrap` — يمنع الالتفاف (سطر واحد) - `pre` — يحافظ على المسافات والفواصل (كـ `<pre>`) - `pre-wrap` — مثل pre لكن يسمح بالالتفاف - `pre-line` — يحافظ على فواصل الأسطر فقط
**word-break:** يتحكم في كسر الكلمات الطويلة: - `normal` — الافتراضي - `break-all` — يكسر الكلمة في أي مكان - `keep-all` — لا يكسر (مفيد للأكواد)
**overflow-wrap / word-wrap:** `break-word` يكسر الكلمة الطويلة فقط عند الضرورة (أفضل من break-all).
| 1 | body { line-height: 1.7; } |
| 2 | h1 { line-height: 1.2; } /* العناوين تحتاج line-height أقل */ |
| 3 | |
| 4 | .code-block { white-space: pre; font-family: monospace; } |
| 5 | .tag-name { white-space: nowrap; } |
| 6 | .long-url { overflow-wrap: break-word; word-break: break-all; } |
مثال 1: نصوص الجسم والعناوين
| 1 | :root { |
| 2 | --leading-tight: 1.25; |
| 3 | --leading-snug: 1.375; |
| 4 | --leading-normal: 1.5; |
| 5 | --leading-relaxed:1.625; |
| 6 | --leading-loose: 2; |
| 7 | } |
| 8 | |
| 9 | h1, h2, h3 { line-height: var(--leading-tight); } |
| 10 | p { line-height: var(--leading-relaxed); } |
| 11 | .caption { line-height: var(--leading-normal); } |