HTML structure:
<p class="one">1. It only works for English and uses letters as the basis for line breaking</p>
<p class="two">2. It only works for English and uses words as the basis for line breaking</p>
<p class="three">3. Works only for Chinese, forcing line breaks</p>
<p class="four">4. Force no line break, all work</p>
<p class="five">5. No line breaks, the excess part is hidden and appears in the form of ellipsis</p>
<p class="five">6. No line breaks, the excess part is hidden and appears in the form of ellipsis</p>
CSS code:
. one {word break: break all; width: 150px;}/* Only works for English, using letters as the basis for line breaking*/
. two{word wrap: break word; width: 150px;}/* -- only works for English, with words as the basis for line breaking*/
. thread {white space: pre wrap; width: 150px;}/* Works only for Chinese, forcing line breaks*/
. four {white space: nowrap; width: 10px;}/* Force no line breaks, both of which work*/
.five{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}／/* No line break, the excess part is hidden and appears in the form of ellipsis*/
1. word-break:break-all; It only works for English and uses letters as the basis for line breaking
2. word-wrap:break-word; It only works for English, with words as the basis for line breaking
3. {white space: pre wrap; works only for Chinese, forcing line breaks
4. {white space: nowrap; forcing no line breaks works
5. {white space: nowrap; overflow: hidden; text overflow: ellipsis; no line break, the excess part is hidden and appears in the form of ellipsis
Note that you must specify the width of the container, otherwise it is useless.
Note that word break is a proprietary attribute of IE5+
Syntax:
word-break : normal | break-all | keep-all
Parameters:
Normal: According to the text rules of Asian and non Asian languages, line breaks are allowed within words
Break all: This behavior is the same as normal in Asian languages. It also allows disconnection within any word in non Asian languages. This value is suitable for Asian texts containing some non Asian texts
Keep all: the same as normal in all non Asian languages. For Chinese, Korean and Japanese, word disconnection is not allowed. Suitable for non Asian texts containing a small number of Asian texts
explain:
Sets or retrieves the inline newline behavior of text within an object. Especially when there are multiple languages.
For Chinese, break all should be used.
