הגבלת מספר השורות ל N שורות ב CSS

כדי להגביל טקסט למספר קבוע של שורות ב-CSS, השתמשו בתכונה -webkit-line-clamp. הטקסט נחתך אחרי השורה האחרונה שהוגדרה, ונוספות בסופו שלוש נקודות (…), כך שתקצירים בכרטיסים, כותרות מוצרים ותיאורים נשארים בגובה אחיד.

מדובר בפתרון CSS בלבד. הטקסט המלא נשאר ב-HTML, כך שקוראי מסך (וגם מנועי חיפוש) עדיין מקבלים את כולו.

קוד CSS להגבלת טקסט ל-N שורות

הוסיפו את הקוד הבא לקובץ העיצוב שלכם (בוורדפרס, לקובץ style.css של תבנית הבת או בעיצוב > התאמה אישית > CSS מותאם) ושנו את המספר למספר השורות שתרצו להציג:

.text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* number of lines to show */
    overflow: hidden;
}

וזה ה-Markup, למשל:

<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod.
</div>

כיצד line-clamp עובד

שלוש התכונות עם הקידומת חייבות לעבוד יחד. ל--webkit-line-clamp אין שום השפעה אלא אם לאלמנט מוגדרים גם display: -webkit-box (או -webkit-inline-box) וגם -webkit-box-orient: vertical.

• -webkit-line-clamp: 2 קובע את מספר השורות המרבי ומוסיף את שלוש הנקודות בסוף השורה האחרונה.
• overflow: hidden מסתיר את השורות שאחרי המגבלה. בלעדיו שלוש הנקודות יופיעו, אבל שאר הטקסט עדיין יהיה גלוי.
• text-overflow: ellipsis אינו נחוץ בגרסה מרובת השורות. שלוש הנקודות מגיעות מ-line-clamp עצמו.

הקידומת אולי נראית מיושנת, אבל זו הגרסה שעובדת. -webkit-line-clamp נתמך ב-Chrome, Edge, Safari ו-Firefox (החל מ-Firefox 68), ו-MDN מציין שהשילוב הזה של תכונות ימשיך להיות נתמך.

התכונה line-clamp ללא קידומת קיימת במפרט ה-CSS, אבל נכון ל-2026 אף גרסה יציבה של דפדפן לא תומכת בה. היא זמינה רק בגרסאות Preview או מאחורי flags, אז אל תשתמשו בה לבדה בינתיים.

הגבלת טקסט לשורה אחת עם שלוש נקודות

לשורה אחת אין צורך ב-line-clamp. הגישה הקלאסית עם text-overflow עובדת בכל הדפדפנים:

.text-one-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

text-overflow לא יוצר את הגלישה בעצמו. צריך להכריח את הטקסט להישאר בשורה אחת עם white-space: nowrap, ולאלמנט צריך להיות רוחב מוגבל (אלמנט בלוק, או inline-block עם רוחב מוגדר).

בעיות נפוצות

אם הטקסט לא נחתך כמצופה, בדקו קודם את הדברים הבאים:

• השורה הבאה מציצה בתחתית. padding אנכי על האלמנט חושף חלק מהשורה המוסתרת, מכיוון ש-overflow: hidden חותך לפי גבול ה-padding. העבירו את ה-padding לאלמנט עוטף.
• שום דבר לא נחתך. כלל אחר דורס את ה-display, למשל display: flex או display: block שמגיע מהתבנית.
• אתם צריכים הגבלה לפי תווים, לא לפי שורות. CSS לא יודע לספור תווים. קצרו את הטקסט בצד השרת: mb_strimwidth() ב-PHP חותך מחרוזת לפי רוחב מוגדר, ו-wp_trim_words() בוורדפרס חותך אותה למספר מילים.

הגבלת שורות משתלבת היטב עם text-wrap: balance ו-pretty עבור כותרות בכרטיסים. לעוד טיפים לאופטימיזציה של CSS, תנו מבט באופטימיזציה של CSS לביצועים טובים יותר.

שאלות נפוצות

הנה כמה שאלות שעולות לא מעט לגבי הגבלת שורות טקסט ב-CSS: