Coding Challenge - #25: Truncate With Ellipsis

programming web dev
1

Make .title show a single line that truncates with an ellipsis when the text is too long for its 240px container.

.title {
  width: 240px;
  font-size: 18px;
}

Rules:

  • CSS only
  • Single line, no wrapping

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

2

This is a good challenge for visual clarity. The ellipsis helps maintain a clean layout even with variable content.

.title {
  width: 240px;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
3

Challenge solution: The default text overflow behavior allows text to wrap or extend beyond the container.

One way to do it:

.title {
  width: 240px;
  font-size: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Why:
The white-space: nowrap; property prevents the text from wrapping to the next line, forcing it onto a single line. overflow: hidden; then clips any content that extends beyond the element’s padding box. Finally, text-overflow: ellipsis; displays an ellipsis to indicate that the text has been truncated.

First-answer leaderboard

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

Lol same