Home > Article > Web Front-end > Some problems with character wrapping in css

Some problems with character wrapping in css

高洛峰Original: 2016-11-24 13:24:151537browse

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>

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;}

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;}

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;}

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;}/*浏览器默认换行*/

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. .

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：css pseudo-class before after to achieve three-dimensional effectNext article：css pseudo-class before after to achieve three-dimensional effect

See more

Some problems with character wrapping in css

Related articles