איך מקצצים טקסט אחרי מספר נתון של שורות?

מכירים את זה שאתם בונים אתר עם עיצוב מוקפד וגריד מדויק ברמת הפיקסל שנראה בדיוק לפי המוקאפ שקיבלתם מהמעצב, ואז הלקוח ממלא את אחד מהכרטיסים בעמוד הבית בטקסט ומתלונן על זה שהאתר לא נראה כמו בעיצוב שקיבלתם?

בדיוק בשביל מקרים כאלה נועד line-clamp, שיודע לחתוך את הטקסט הנתון בתוך בלוק כלשהו אחרי מספר נתון של שורות.

כאן, לדוגמה, הטקסט ייחתך אחרי 4 שורות

.div {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

אפשר לראות שהדרך לעשות את זה מתחלקת לארבעה חלקים.

לסיום, אנחנו צריכים להגדיר overflow: hidden כדי שהטקסט באמת ייחתך אחרי שלוש הנקודות.