Skip to main content
Home / Code Snippets / CSS / Truncate String with Ellipsis

Truncate String with Ellipsis

All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden.

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

See the Pen Basic Overflow Ellipsis by Chris Coyier (@chriscoyier) on CodePen.

Note the fixed width in use here. The gist is that the element needs some kind of determinate width, which you have to be particularly careful about with flexbox:

See the Pen Thing you gotta know about flexbox by Chris Coyier (@chriscoyier) on CodePen.


Looking for truncating to a particular number of lines?

icon-link icon-logo-star icon-search icon-star