Truncating text with an ellipsis in CSS

You can use the text-overflow CSS property to truncate the overflowing text with an ellipsis (three dots) in overflowing block elements:

<div class="test">
  There is a theory which states that if ever anyone discovers exactly what the Universe is for and why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable. There is another theory which states that this has already happened.
</div>

<style>
.test {
  text-overflow: ellipsis;
  white-space: nowrap;    
  overflow: hidden;

  border: 1px solid #d3d3d3;    
  padding: 5px;
}
</style>

Result (preview):

Note: Since text-overflow only affects overflowing block elements, and it doesn't force the overflow itself, we have to do that ourselves with overflow: hidden.

Also, text-overflow only affects the inline progression direction (it won't affect the text overflowing at the bottom of our element), so we have to specify white-space: nowrap to prevent the white space from wrapping into the next line.

Browser support

text-overflow: ellipsis is well supported in all modern browsers.

Ask me anything / Suggestions