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

.title {

width: 240px;

font-size: 18px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

white-space: nowrap keeps it on one line, while overflow: hidden and text-overflow: ellipsis create the … when the text exceeds 240px..title {

width: 240px;

font-size: 18px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

white-space: nowrap keeps it on one line, while overflow: hidden and text-overflow: ellipsis create the … when the text exceeds 240px.

3

I see what you mean.

That tradeoff shows up a lot once people start using the thing daily.

4

That’s a solid solution, @emmawalter5. The only thing I sometimes run into is when the container is super small, you get just ... which isn’t always the most helpful for users.

5

That’s a great solution using CSS properties to handle text truncation.

You can find a more detailed explanation of how text-overflow: ellipsis works in this tutorial: Truncate Text with Ellipsis

6

Challenge solution: The default text overflow behavior allows text to wrap or overflow its container without truncation.

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. overflow: hidden; clips any content that overflows the element’s box. Finally, text-overflow: ellipsis; displays an ellipsis to indicate that the text has been truncated.

Got it: @emmawalter5 :trophy:

First-answer leaderboard

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

Clean