Home » CSS 3 » text-overflow ellipsis

text-overflow ellipsis

Quite a while back, CSS added a feature to the text-overflow. The text-overflow declaration allows you to deal with clipped text: that is, text that does not fit into its box. text-overflow comes into play only when:

a) the box has overflow other than visible (with overflow: visible the text simply flows out of the box)
b) the box has white-space: nowrap or a similar method of constraining the way the text is laid out. (Without this, the text would wrap to the next line)

Therefore the test element has both white-space: nowrap and overflow: hidden or clip.
text-overflow:ellipsis only works on single line of text. That is, you can’t simultaneously have the text wrap to subsequent lines and have it ellipse at the end of the last line.

text-overflow ellipsis usage

.ellipsis {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Setting the width provides the obvious boundary for, white-space prevents normal next-line wrapping, hiding overflow ensures the width dimension is respected, and the text-overflow setting provides the ellipsis.

text-overflow ellipsis Browser Support

text-overflow ellipsis is supported in latest browsers.
A bunch of more techniques here, including multi-line ellipsis.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*