Published on

CSS text-overflow only works on block elements

Authors

In CSS if you want to use ellipsis or cut text in a container you would apply a class similar to the below:

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

You would then use it as a class for an element

<div class="truncate">Really long text 12345678901234567</div>

This will render as below:

<div style="width: 10vw; white-space:nowrap; overflow:hidden; text-overflow: ellipsis;">
  Really long text 12345678901234567
</div>

One thing I picked up is this can only be applied to a block element e.g. <div> or <p>. This will not work on an inline element like a <span>.