Some problems with character wrapping in css-CSS Tutorial-php.cn

Some problems with character wrapping in css

高洛峰

Release： 2016-11-24 13:24:15

Original

1566 people have browsed it

Word-break in css can solve this problem. Write a test page to take notes

css code:

 body{font-size:14px;}
 p{ border:solid 1px red;width:200px;}
 
 
 
<body>
    <p class="test">English中文中文中文中文中文中文Englis333hEnglishEnglishEnglish中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 123ewewee
        123EnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglish
       
    </p>
</body>

Copy after login

The running effect at this time is as mentioned at the beginning of the title. Now add some styles to the p tag

css code:

.test{ word-break:break-all;}

Copy after login

You can find that all text, whether it is Chinese, English or numbers, can be automatically forced to change lines at the end of the p tag of the package. This will have a problem. It will split the string that is originally a combination to see the effect. Look at another

css code:

.test {word-break:hyphenate;}

Copy after login

This css may break the character segment of the wrapped element and wrap it in advance at the hyphenation point

Look at

css code again:

 .test{ word-break:keep-all;}

Copy after login

Wraps new lines in all character fields and the spaces between them, preserving the integrity of all character fields. Breaking the wrapped element

word-break also has some attributes:

css code:

 .test{ word-break:normal;}/*浏览器默认换行*/

Copy after login

If there is no need to maintain the integrity of the word, break-all can solve the problem of breaking the container, because in In actual application, there will be no words whose length exceeds the width of a container, so hyphenate can solve the problem of keeping the word complete without breaking the container. Secondly, in some scenarios, scroll bars or overflow:hidden can be used to maintain the integrity of the interface. .