What's the difference between word-wrap and text-overflow?
This article mainly explains "what is the difference between word-wrap and text-overflow". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the idea of Xiaobian slowly and deeply to study and learn "what is the difference between word-wrap and text-overflow" together!
One: word-wrap forced wrapping attribute
In css3, we can use the word-wrap attribute to determine whether a string of long words and urls can be changed to the next line. There are two values for word-wrap, normal and break-word respectively. Normal is the default value, which automatically wraps. The second is to set the length of the url and force the line.
For example:
CSS3word-wrap properties
#lvye
{
width:200px;
height:120px;
border:1pxsolidgray;
}
WelcometotheChinesewebsite,wherethereisendlessPHPknowledgetoletyouroamintheseaofknowledge.http://www.php.cn/div-tutorial-275623.html
The preview effect of the above code in the browser:
WeChat screenshot_20181026161827.png
If we add word-wrap:break-word; to the div, we get a forced line break, and if the word is too long, we get out of range. When creating a website, we simply choose the default values.
II: text-overflow Text overflow attribute
We always see this phenomenon when we preview the web page. When our text exceeds a certain range, it will be displayed in the form of ellipses, and the extra text will not be displayed. This setting is actually better for users and can help users know more content.
If you want to hide the extra content, we can use the text-overflow attribute. Generally, text-overflow also has two values. The first case is that the ellipsis appears when the text overflows, and the other case is that the ellipsis appears when the text overflows, and the overflow part is not displayed.
text-overflow syntax is:
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
The premise is that these three conditions can be displayed at the same time.
For example:
CSS3text-overflow properties
#div1
{
width:200px;
height:100px;
border:1pxsolidgray;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
PHP is the best language, welcome to learn and communicate
Thank you for reading, the above is "what is the difference between word-wrap and text-overflow" content, after the study of this article, I believe that we have a deeper understanding of the difference between word-wrap and text-overflow, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!
