Home > Article > Web Front-end > How to hide excess text in CSS and replace it with ellipses
How to hide excess text in CSS and replace it with ellipses
- 清浅Original
- 2018-11-24 15:51:086174browse
How to implement CSS to hide the excess text and replace it with ellipses: first create an HTML sample file; then enter the text content in the body; and finally hide it through the "overflow:hidden" and "text-overflow" attributes Just add an ellipse to the part.
The operating environment of this article: Windows 7 system, Dell G3 computer, HTML5&&CSS3 version.
If the text exceeds the limit in CSS, you can use overflow:hidden to hide it and the text-overflow attribute in CSS to add ellipses to the hidden part.
Often when writing a page, you will encounter too much text content. In this case, we often use overflow:hidden to hide the content that exceeds the box. But today I will tell you a new little knowledge point. We can use it to hide the articles that exceed the box and replace them with ellipses. Next, we will show you in the article Let me introduce you in detail
html code
p{
width:300px;
height:30px;
border: 1px solid #ccc;
text-align: center;
font-size: 12px;
line-height:30px;
}
</style>
</head>
<body>
<p>php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!
php从入门到精通,一站式php自学平台!</p>
##text-overflow attribute
Specifies what happens when the text overflows the containing element. It is a property in CSS3. It has three values:clip: Trim the text and delete the excess part
text-overflow:clip; overflow:hidden; white-space:nowrap;规定段落中的文本不进行换行
ellipsis: Use ellipses to replace deleted content
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
When the mouse is placed, the hidden words are displayed
overflow:visible;
The above is the detailed content of How to hide excess text in CSS and replace it with ellipses. For more information, please follow other related articles on the PHP Chinese website!