ما هي ضوابط مربع النص السليمة؟

يمكنك إستخدام خاصيتين في CSS للأمر، أو يمكنك جعل الحاوي نفسه بدون طول محدد كما يظهر برد الاخوة عليك .

الأولى overflow على الحاوي النص، وذلك سيؤدي لإظهار Scroll داخل الصندوق للنزول لقراءة باقي النص ضمن الحاوي - الرمادي - نفسه .

overflow: auto;
height: 200px;

الثانية text-overflow على حاوي النص، والذي سيظهر فقط النص بحدود الحاوي بدون إظهار باقي النص أو Scroll لقرائته .

text-overflow: ellipsis;
height: 200px;

للإستزادة حول الخاصية الثانية :

عبر جعل المحاذاة تلقائية هكذا:

text-align: justify;

ملاحظة: بعض المتصفحات القديمة تستخدم طرق أْخرى.

height: auto

div {
height: auto;
overflow: hidden;
}

 div{white-space:nowarp}}

بالنسبة لل div يجب عليك تحديد حجمها و الا ستأخد حجم بعرض كامل الصفحة 100% و النص سيورث هذه الميزة (سيستمر في التوسع طالما حجم ال div يسمح ) .

لا اعرف من اي جهاز الصور حتى لو كانت من جهاز جوال فلابد لك من تحديد حجم ال div الرئيسية في جميع الاحول سواء حجم تابث بالبكسل او بالنسبة المئوية ,

هذ حل يعمل على ال Desktop و الموبايل

div { white-space:normal }