How to fix text-overflow: ellipsis not working with CSS?

Spread the love

Sometimes, we want to fix text-overflow: ellipsis not working with CSS.

In this article, we’l look at how to fix text-overflow: ellipsis not working with CSS.

How to fix text-overflow: ellipsis not working with CSS?

To fix text-overflow: ellipsis not working with CSS, we need to set the width or max-width of the element.

For instance, we write

span {
  border: solid 2px blue;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100px;
  display: block;
  overflow: hidden;
}

to set the width of the span.

And then we use white-space: nowrap; to keep all the content to 1 row.

We use overflow: hidden; to hide any overflowing content.

And we use text-overflow: ellipsis; to add an ellipsis after the truncated content.

Conclusion

To fix text-overflow: ellipsis not working with CSS, we need to set the width or max-width of the element.

Leave a Reply

Your email address will not be published. Required fields are marked *