شرح خاصية Text-Overflow في برمجة CSS او Css3

Text-Overflow بإختصار هي خاصية في Css3 تجعلك ببساطة تحدد طريقة ظهور النص المقطوع هل مقطوع بالشكل العادي او عن طريق وضع ثلاث نقط (...) في آخره وهذه الخاصية لا تستعمل وحدها بل لا بد من استعمال خاصيتين مهمتين معها وهي خاصية overflow و خاصية white-space وبالتحديد white-space: nowrap المهم هناك طرقتين لظهور هذه الخاصية سوف نتعرف عليها معا في أمثلة قادمة لكن لا بد من شرح الخاصية overflow و خاصية White-space تابع معنا .

White-Space:nowrap; هذه الخاصية تمكننا من جعل الكتابة تكتمل في سطر واحد

Overflow:hidden; هذه الخاصية تمكننا من اخفاء جزء من الكتابة الخارج عن الإطار المعين

لا بأس حتى وإن لم تفهم لأن الأمثلة القادمة ستجعلك تفهم

الأمثلة

في هذا المثال سوف نطبق خاصية Text-overflow بخاصيتين هما clip و ellipsis تابع الشرح من فضلك

<div id="S-clip">clip:The text is clipped and not accessible</div>
<div id="S-ellipsis">ellipsis:Render an ellipsis ("...") to represent the clipped text</div>

#S-clip{
width: 150px;
border:solid 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
#S-ellipsis{
width: 150px;
border:solid 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

النتيجة

clip:The text is clipped and not accessible

ellipsis:Render an ellipsis ("...") to represent the clipped text

كما ذكرت سابقا لا تنسى خاصية overflow و خاصية white-space لأنه من الضروري استعمالهما بجانب خاصية Text-overflow .

اتمنى ان يكون الشرح واضح وقد افادكم والسلام عليكم