خاصية تجاوز النص في CSS

استخدام خاصية تجاوز النص:

div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

المزيد من الأمثلة "جربها بنفسك" أدناه.

التعريف والاستخدام

تحدد الخاصية كيف يجب إرسال text-overflowإشارة إلى المحتوى المتدفق الذي لا يتم عرضه. يمكن قصه أو عرض علامة حذف (...) أو عرض سلسلة مخصصة.

كلتا الخاصيتين التاليتين مطلوبتان لتجاوز النص:

القيمة الافتراضية:	مقطع
وارث:	رقم
متحرك:	رقم. اقرأ عن animatable
الإصدار:	CSS3
بناء جملة JavaScript:	الكائن .style.textOverflow = "القطع"

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.

الأرقام متبوعة بعلامة -o- تحدد الإصدار الأول الذي يعمل بالبادئة.

Property
text-overflow	4.0	6.0	7.0	3.1	11.0 9.0 -o-

text-overflow: clip|ellipsis|string|initial|inherit;

Value	Description	Play it
clip	Default value. The text is clipped and not accessible
ellipsis	Render an ellipsis ("...") to represent the clipped text
string	Render the given string to represent the clipped text
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

تجاوز النص مع تأثير التمرير (إظهار النص بالكامل عند التمرير):

div.a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.a:hover {
  overflow: visible;
}