السي اس اس Css إظهار 3 نقاط في نهاية السطر الطويل Limit text length
السي اس اس Css إظهار 3 نقاط في نهاية السطر الطويل Limit text length
تحديد عدد الحروف فى السطر / العنوان Limit character input in the textarea
تحدد css عدد الكلمات المعروضة في النص
https://www.rise.company/forum/image.../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/...ines-using-css
https://arabicprogrammer.com/article/1890677005/
