Truncating text with an ellipsis in CSS

📄 OneThingWell.dev wiki page | 🕑 Last updated: Oct 15, 2022

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):

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.

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.


Comments and suggestions

You can use this form to submit a suggestion or a comment.

If you find this site useful in any way, please consider supporting it.