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.
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. <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><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><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>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). <pre class="brush:js;toolbar:false"><style>
.cont{
overflow:hidden;/*内容超出后隐藏*/
text-overflow: ellipsis;/* 超出内容显示为省略号 */
white-space: nowrap;/* 文本不进行换行 */
}
</style></pre><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!
Statement：The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
