search

Home  >  Article  >  Web Front-end  >  What is the difference between word-wrap and text-overflow? Detailed explanation of two properties

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

云罗郡主
云罗郡主Original
2018-10-26 16:24:114480browse

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>

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;

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>

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!

php css css3 break overflow word
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to use css text-stroke property to make text stroke? (source code)Next article：How to use css text-stroke property to make text stroke? (source code)

Related articles

See more