How to use CSS to replace ellipses when text exceeds div or span

Editor to share with you how to use CSS to achieve text exceeding div or span with ellipses instead. I hope you will get something after reading this article. Let's discuss it together.

In a project, we often need to display the text when the text is too long, replacing the excess of the text with an ellipsis:

The idea is:

First set the width, and then let the excess hide

If there is an excess, an ellipsis is displayed at the end.

Keep the text from wrapping

The specific css code is:

The code is as follows:

.title {width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break:keep-all;}

You don't have to write Html code, just a div or span class = "title".

After reading this article, I believe you have a certain understanding of "how to use CSS to replace ellipses when text exceeds div or span". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!