How to set a max character length in CSS?

Spread the love

Sometimes, we want to set a max character length in CSS.

In this article, we’ll look at how to set a max character length in CSS.

How to set a max character length in CSS?

To set a max character length in CSS, we set the max-width and overflow properties.

For instance, we write

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

to set the max-width of the p element.

We hide the overflowing content with overflow: hidden;

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

We use white-space: nowrap; to keep the content in 1 row.

Conclusion

To set a max character length in CSS, we set the max-width and overflow properties.

Leave a Reply

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