טקסט מקוצר לפי תווים, רוחב שדה טקסט או שורות

לפעמים נרצה ליצור תקציר מתוכן הפוסט, של הפוסט (שימושי לליסטינג גריד ברוחב \ אורך מצומצם) או מכל טקסט מידי ארוך או שיכול לגלוש,
הטקטס עצמו חי וקיים כך שאנחנו רק משנים את העיצוב שלו ולא אותו!!!

ישנם אפשרויות שונות וכל קוד נכון, וכל מקרה לגופו ולפי הצורך…

מגבלת טקסט לפי תווים בודדים –

selector h2{
overflow: hidden;
max-width: 75ch;
text-overflow: ellipsis;
white-space: nowrap;
}

מגבלת רוחב אזור טקסט –

selector h2{
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

הגבלת טקסט לפי מספר שורות –

selector h2{
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

כמובן שיש לתת תגית h2 לכל כותרת שנחיל את הקוד עליה…

המדריך עזר לכם?

טקסט מקוצר לפי תווים, רוחב שדה טקסט או שורות
מה במדריך ?

CSS & Design