Truncate String with Ellipsis

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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;
}

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:


Looking for truncating to a particular number of lines? You might also dig this neat fading truncation effect.