35. التعامل مع النص الفائض (white-space, overflow)

أحياناً يتجاوز محتوى النص حدود حاويته. يقدم CSS أدوات لإدارة هذا الفائض بأناقة.

1. التحكم في الالتفاف (white-space)

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

css .no-wrap { white-space: nowrap; /* يجبر المحتوى على البقاء في سطر واحد */ }

2. التحكم في الفائض (overflow)

عندما يتجاوز المحتوى (نص أو صور) صندوق العنصر، تتحكم خاصية overflow فيما يحدث.

css .container-clip { height: 200px; overflow: hidden; /* يقص المحتوى الذي يتجاوز ارتفاع 200 بكسل */ }

.scroll-box { width: 300px; height: 150px; overflow: auto; /* تظهر أشرطة التمرير إذا احتاج المحتوى إليها */ }

ملاحظة: يمكنك التحكم في الفائض اتجاهياً باستخدام overflow-x (أفقي) و overflow-y (عمودي).