تدفق النص CSS3 (Text Overflow)

تقدم الصفات النصية الجديدة في CSS3 مزيدًا من التفاصيل في عرض النص.

معالجة النص الزائد في CSS3

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

إخفاء النص الزائد

على سبيل المثال، إذا تم إخفاء عنصر الفاصلة البيضاء،الصفة white-spaceإذا تم تعيين قيمة الصفة white-space إلى nowrap أو إذا كان الكلمة الواحدة طويلة جدًا بحيث لا يمكن احتواء عنوان البريد الإلكتروني الطويل، فإن هذا قد يؤدي إلى تجاوز النص (مثل، منع الطباعة). في هذه الحالة، يمكنك استخدام CSS3 الصفة text-overflowلإعداد طريقة عرض نص النص الزائد.

يمكنك عرض أو قطع النص الزائد، أو قطع النص وعرض النقاط الثلاث (...) أو 字符串 مخصصة في palace النص المقطوع لتحديد للاستخدام النهائي.

الصفة word-break تقبل القيم: clip、 ellipsis、string。

p　{
　　　　width:　400px;
　　　　overflow:　hidden;
　　　　white-space:　nowrap;
　　　　background:　#cdcdcd;
}
p.clipped　{
　　　　text-overflow:　clip;　/*　clipped　the　overflowed　text　*/
}
p.ellipses　{
　　　　text-overflow:　ellipsis;　/*　display　'…'　to　represent　clipped　text　*/
}

كسر النص المخرج

يمكنك أيضًا استخدام CSS3 word-wrapتقوم الخاصية بكسر كلمة طويلة وتغيير سطرها، مما يجعل حدود العنصر تخرج.

يمكن لخاصية word-wrap قبول القيم: normal و break-word.

p　{
　　　　width:　200px;
　　　　background:　#ffc4ff;
　　　　word-wrap:　break-word;
}

تحديد قواعد حجب النص

يمكنك أيضًا استخدام CSS3 word-breakتحدد الخاصية المحددة قواعد حجب النص (أي كيفية حجب الكلمات).

يمكن تحديد خاصية word-break بمستويات القبول: normal،break-all و keep-all.

p　{
　　　　width:　150px;
　　　　padding:　10px;
}
p.break　{
　　　　background:　#bedb8b;
　　　　word-break:　break-all;
}
p.keep　{
　　　　background:　#f09bbb;
　　　　word-break:　keep-all;
}