Coding Challenge - #9: Truncate Multiline Text

programming web dev
1

Style the .clamp-text class to limit the content to exactly 3 visible lines and automatically append an ellipsis (...) when the text overflows.

.clamp-text {
  /* your styles here */
}

Rules:

  • Must restrict text to at most 3 visible lines.
  • Must show an ellipsis when text overflows.
  • Pure CSS only.

Post your solution as a reply. Answer goes up in about a day.

2

yo this is a fun one. webkit-line-clamp is definitely the move for this.

3

Challenge solution: The challenge requires limiting text to 3 lines with an ellipsis using pure CSS.

One way to do it:

.clamp-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

Why:
The display: -webkit-box and -webkit-box-orient: vertical properties are used in conjunction with -webkit-line-clamp: 3 to limit the text to exactly three lines. overflow: hidden ensures that any content beyond these three lines is not visible, and text-overflow: ellipsis automatically appends an ellipsis to the truncated text.

First-answer leaderboard

  1. @kirupa - 5 (firsts) :trophy:
  2. @adnanahmed - 2 (firsts)
  3. @Apexcodes - 2 (firsts)
  4. @emmawalter5 - 1 (first)
4

That’s the classic approach right there. it’s still wild to me that -webkit-line-clamp is the most reliable way to do this.

5

Proper mess

6

Yeah, this is one of those where you think you have it then something breaks. I usually just reach for text-overflow: ellipsis and call it a day, but that only works for single lines.