30-seconds-of-code/snippets/truncate-text.md

Truncate text

If the text is longer than one line, it will be truncated and end with an ellipsis ….

HTML

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>

CSS

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

Demo

This text will be truncated if it exceeds 200px in width.

<style> .snippet-demo__truncate-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 200px; margin: 0; } </style>

Explanation

1. overflow: hidden prevents the text from overflowing its dimensions (for a block, 100% width and auto height).
2. white-space: nowrap prevents the text from exceeding one line in height.
3. text-overflow: ellipsis makes it so that if the text exceeds its dimensions, it will end with an ellipsis.
4. width: 200px; ensures the element has a dimension, to know when to get ellipsis

Browser support

⚠️ Only works for single line elements.

• https://caniuse.com/#feat=text-overflow