السي اس اس Css إظهار 3 نقاط في نهاية السطر الطويل Limit text length

[Rise Company]

السي اس اس Css إظهار 3 نقاط في نهاية السطر الطويل Limit text length
تحديد عدد الحروف فى السطر / العنوان Limit character input in the textarea
تحدد css عدد الكلمات المعروضة في النص

https://www.rise.company/forum/images/primus/bw/misc/logo.png

لضمان الحصول على صفحة نظيفة وجميلة ، غالبًا ما نحتاج إلى إخفاء النص الذي يتجاوز طوله. يُستخدم هذا عادةً في عناصر القائمة والعناوين والأسماء وما إلى ذلك.


--------------------------------------------------

(1) النص يتجاوز سطر واحد ، يحذف الزائد ، ويعرض "..."

إذا كان هناك العديد من هذه الحالات ، يمكنك استخدام اسم فئة يمكن استخدامه لإعادة الاستخدام.


.line-limit-length {

overflow: hidden;

text-overflow: ellipsis;

مسافة بيضاء: nowrap؛ // لا يلتف النص ، بحيث يتم اعتراض الجزء الذي يتجاوز سطر واحد وعرضه ...

}

<div class="item">

<p class = "line-limit-length"> آخر الأخبار: الثقب الأسود الغامض لا يمكن فهمه ، ويتنفس باستمرار في مياه البحر المحيطة. </p>

<i class = "icon icon-arrow-Go"> </i> // خط الرمز

</div>

(2) يمكن إعطاء حد عرض الحاوية ، ويتم حذف الجزء الزائد


.product-buyer-name {

max-width: 110px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

---------------------------------------
الخلاصة


line-height: 50px;
text-align: center;
display: flex;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-box-flex: 3;
-moz-box-flex: 3;
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
max-height: 100px;

المرجع:
https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css
https://arabicprogrammer.com/article/1890677005/