Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you how CSS hides the excess text and uses ellipses to replace the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

When the text exceeds in CSS, you can use overflow:hidden to hide and the text-overflow attribute in CSS to add ellipses to the hidden part.

When writing a page, we often encounter too much text content than the box content. In this case, we often use overflow:hidden to hide, but today we are going to tell you a new little knowledge point. We can use it to hide the excess part of the article and replace it with ellipsis. Next, we will introduce to you in detail in the article.

Html code

P {

Width:300px

Height:30px

Border:1pxsolid#ccc

Text-align:center

Font-size:12px

Line-height:30px

}

Php Chinese website provides a large number of free, original, high-definition php video tutorials, and regular public welfare php training! You can modify the sample code online while learning to see the implementation effect!

Php from entry to proficiency, one-stop php self-learning platform!

Image18.jpg

Text-overflow attribute

Specifies what happens when a text overflow contains an element, which is an attribute in CSS3 and has three values of

Clip: trim the text to delete the excess

Text-overflow:clip

Overflow:hidden

White-space:nowrap; stipulates that the text in a paragraph does not wrap.

Image16.jpg

Ellipsis: replace deleted content with ellipsis

Text-overflow:ellipsis

Overflow:hidden

White-space:nowrap

This is all the content of the article "how CSS hides the excess text and replaces it with ellipses". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.