How to hide excess text in CSS and replace it with ellipses-CSS Tutorial-php.cn

How to hide excess text in CSS and replace it with ellipses

清浅

Release： 2021-04-22 15:07:29

Original

6235 people have browsed it

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.

How to hide excess text in CSS and replace it with ellipses

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>

Copy after login

Image 18.jpg

##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;规定段落中的文本不进行换行

Copy after login

Image 16.jpg

ellipsis: Use ellipses to replace deleted content

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

Copy after login

Image 17.jpg

When the mouse is placed, the hidden words are displayed

overflow:visible;

Copy after login

How to hide excess text in CSS and replace it with ellipses

Summary: The above is the entire content of this article, I hope it will be helpful to everyone.

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!