About the code to replace CSS text with ellipses when it exceeds div or span

In the project, we often need to display the text when it is too long, and replace the excess content with ellipses. How is this achieved based on CSS code? Below, the editor of Script House will give you a detailed explanation by analyzing this article. Friends who are interested can learn together

In the project, we often need to display the text when it is too long, and replace the excess content with ellipses:
The idea is:
First set the width, and then hide the excess part
If there is excess, display an ellipsis at the end
Let the text not wrap
Specific css The code is:

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

There is no need to write the Html code, just a p or span class = "title".

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Summary of knowledge points about css front-end

Use 63 lines of HTML5 code to implement Snake game

The above is the detailed content of About the code to replace CSS text with ellipses when it exceeds div or span. For more information, please follow other related articles on the PHP Chinese website!