How to set text beyond the ellipses in css-CSS Tutorial-php.cn

How to set text beyond the ellipses in css

醉折花枝作酒筹

Release： 2023-01-05 16:10:00

Original

15906 people have browsed it

Method: First use the "overflow:hidden" statement to set the content to be hidden after it exceeds the limit; then use the "text-overflow:ellipsis" statement to set the content to be displayed as an ellipsis when it exceeds the limit; finally use "white-space:nowrap" statement, just set the text without line breaks.

How to set text beyond the ellipses in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Create a new html page, find the

tag on the html code page, create a

tag in the

tag, then enter the displayed content and add a class class as class= "cont". Find the tag, create a <style> tag under this tag, and set the style content with class cont in the <style> tag to be hidden after it is exceeded. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> .cont{ overflow:hidden;/*内容超出后隐藏*/ } </style> </head> <body> <p class="cont"> 订单的的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</p> </body> </html></pre><div class="contentsignin">Copy after login</div></div><p>Save the code, use a browser to open the html file to view the effect, and find that the content is not hidden because the height of the content is not set. </p><p><img src="https://img.php.cn/upload/image/568/666/863/1618897643717434.png" title="1618897643717434.png" alt="How to set text beyond the ellipses in css"/></p><p>Set the content to be displayed as one line. When the content exceeds, it will be displayed as an ellipsis. Adding content to the cont class is displayed as one line: white-space: nowrap;, and the content after it exceeds is displayed as an ellipsis: text-overflow: ellipsis; (Note: white-space: nowrap; and text-overflow: ellipsis; must be used at the same time to be displayed. is an ellipsis). </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><style> .cont{ overflow:hidden;/*内容超出后隐藏*/ text-overflow: ellipsis;/* 超出内容显示为省略号 */ white-space: nowrap;/* 文本不进行换行 */ } </style></pre><div class="contentsignin">Copy after login</div></div><p>After saving the code, use a browser to open it to see the effect of the content being displayed as an ellipsis after it exceeds the limit. <p><img src="https://img.php.cn/upload/image/183/356/670/1618897808567717.png" title="1618897808567717.png" alt="How to set text beyond the ellipses in css"/><p> Recommended learning: <a href="https://www.php.cn/course/list/12.html" target="_blank">css video tutorial</style>

The above is the detailed content of How to set text beyond the ellipses in css. For more information, please follow other related articles on the PHP Chinese website!