How to truncate text in CSS properly?

Ths example uses tailwind CSS, but you can use the same approach with regular CSS.

How to truncate text properly in CSS?

This is an example of the you can truncate text just like the interactive example bellow. This makes it better as it shrinks and grows (You can set a max-width to the container) and truncates the text when needed.

<!-- The min width is important if this div is child of a flex or grid container -->
<div class="min-w-0">
  <!-- User Name -->
  <p class="truncate">
    <!-- A long username as example that can overflow -->
    Lorem ipsum dolor sit amet.
  </p>
</div>

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

.min-w-0 {
  min-width: 0;
}

Interactive example (Try resizing)

Why min-w-0 is Important

By default, flex items (or grid children) won’t shrink below their content’s natural width (by default for flex items and grid childs they have min-width: auto), which prevents truncation from working. min-w-0 overrides this, allowing the content to shrink within the available space.

Without it, .truncate might have no effect.

You don’t need min-w-0 if

• The parent element of the container of the text is not flex or grid.
• You know what you are doing.

How to not do it (Maybe)

Setting a max width is not a good way truncate text. When there is extra width it’s not going to use it and simply gets truncated which does not look very nice.

This is only good when you know your width is not going to be more than a specific length or you simply want it to be specific.

<div class="max-w-8">
  <!-- User Name -->
  <p class="truncate">
    <!-- A long username as example that can overflow -->
    Lorem ipsum dolor sit amet.
  </p>
</div>