What is the difference between word-wrap and text-overflow? Detailed explanation of two properties-CSS Tutorial-php.cn

What is the difference between word-wrap and text-overflow? Detailed explanation of two properties

云罗郡主

Release： 2018-10-26 16:24:11

Original

4466 people have browsed it

In CSS styles, many people cannot distinguish between two attributes, one is text overflow, and the other is text wrapping. So what are the word-wrap and text-overflow attributes? Let's summarize the word-wrap and text-overflow properties.

1: word-wrap forces newline attribute

In css3, we can use the word-wrap attribute to determine a string of long words and URLs, and whether they can be changed Go to the next line, there are two values for word-wrap, namely normal and break-word. Normal represents the default value and automatically wraps the line. The second is to set the length of the url and force a line break.

For example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 word-wrap属性</title>
    <style type="text/css">
        #lvye
        {
            width:200px;
            height:120px;
            border:1px solid gray;
        }
    </style>
</head>
<body>
<div id="lvye">Welcome to the Chinese website, where there is endless PHP knowledge to let you roam in the sea of knowledge.http://www.php.cn/div-tutorial-275623.html</div>
</body>
</html>

Copy after login

The preview effect of the above code in the browser:

What is the difference between word-wrap and text-overflow? Detailed explanation of two properties

If we add word-wrap to the div :break-word; will force a new line. If the word is too long, it will exceed the range. When making a website, we just need to choose the default value.

2: text-overflow text overflow attribute

When we preview a web page, we will always see this phenomenon. 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 we want to hide redundant content, we can use the text-overflow attribute. Generally, text-overflow also has two values. The first case is that an ellipse appears when the text overflows, and the other is that it appears when the text overflows. Ellipsis, and the overflow part is not displayed.

The text-overflow syntax is:

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

Copy after login

The prerequisite is that these three conditions are displayed at the same time before it can be used.

For example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-overflow属性</title>
    <style type="text/css">
        #div1
        {
            width:200px;
            height:100px;
            border:1px solid gray;
            text-overflow:ellipsis;
            overflow:hidden;
            white-space:nowrap;
        }
    </style>
</head>
<body>
    <div id="div1">php是最好的语言，欢迎大家学习交流</div>
</body>
</html>

Copy after login

The display effect is as follows:

What is the difference between word-wrap and text-overflow? Detailed explanation of two properties

The above is a detailed explanation of the word-wrap and text-overflow attributes in css Introduction, if you want to know more about CSS video tutorial, please pay attention to php Chinese website.

The above is the detailed content of What is the difference between word-wrap and text-overflow? Detailed explanation of two properties. For more information, please follow other related articles on the PHP Chinese website!