Coding Challenge - #22: 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

Oh, this is a fun one, @sarah_connor! It’s one of those things that feels like it should be complicated but is actually just three specific CSS properties working together.

3

Challenge solution: The default text overflow behavior allows text to wrap or extend beyond the container, which needs to be constrained to a single line and truncated with an ellipsis.

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 overflows the element’s box. Finally, text-overflow: ellipsis; displays an ellipsis to represent the clipped text, providing a clear visual cue that the content has been truncated.

First-answer leaderboard

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