CSS English and Chinese Forced Line Break and Non-Break Code
Category Programming Techniques
1.
word-break:break-all;
Only works for English, breaks lines at letter boundaries2.
word-wrap:break-word;
Only works for English, breaks lines at word boundaries3.
white-space:pre-wrap;
Only works for Chinese, enforces line breaks4.
white-space:nowrap;
Enforces no line breaks, works for all5.
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
No line breaks, overflow is hidden and appears as an ellipsis
Note: Be sure to specify the width of the container (width), otherwise, it won't work.
Example
.p1{ word-break:break-all; width:150px;}
.p2{ word-wrap:break-word; width:150px;}
.p3{white-space:pre-wrap; width:150px;}
.p4{white-space:nowrap; width:10px;}
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}
word-break Syntax
word-break : normal | break-all | keep-all
Parameters:
normal : According to the text rules of Asian and non-Asian languages, allows for line breaks within characters
break-all : This behavior is the same as normal for Asian languages. Also allows for arbitrary character breaks in non-Asian language text lines. This value is suitable for Asian text that includes some non-Asian text
keep-all : The same as normal for all non-Asian languages. For Chinese, Korean, and Japanese, does not allow for character breaks. Suitable for non-Asian text that includes a small amount of Asian text
For more information, refer to CSS3 word-break property