How does CSS hide excess text and replace it with ellipses
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.
