word-wrap: normal Default. Content exceeds the boundaries of its container. break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。
word-break: normal Default. Allows line breaking within words. 好像是只对Asian text起作用。 break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text. keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.
.c1{ width:300px; border:1px solid red} <div class="c1"> safjaskflasjfklsajfklasjflksajflksjflkasjfksafj </div> <div class=c1> This is all English. This is all English. This is all English. </div> <div class=c1> 全是中文的情况。全是中文的情况。全是中文的情况。 </div> <div class=c1> 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. </div>
<br> .c2{ width:300px;word-wrap:break-word; border:1px solid yellow} <div class="c2"> safjaskflasjfklsajfklasjflksajflksjflkasjfksafj </div> <div class=c2> This is all English. This is all English. This is all English. </div> <div class=c2> 全是中文的情况。全是中文的情况。全是中文的情况。 </div> <div class=c2> 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. </div>
<br> .c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green} <div class="c3"> safjaskflasjfklsajfklasjflksajflksjflkasjfksafj </div> <div class=c3> This is all English. This is all English. This is all English. </div> <div class=c3> 全是中文的情况。全是中文的情况。全是中文的情况。 </div> <div class=c3> 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. </div>
<br> .c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue} <div class="c4"> safjaskflasjfklsajfklasjflksajflksjflkasjfksafj </div> <div class=c4> This is all English. This is all English. This is all English. </div> <div class=c4> 全是中文的情况。全是中文的情况。全是中文的情况。 </div> <div class=c4> 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. </div>
<br> .c5{ width:300px;word-break:break-all; border:1px solid black} <div class="c5"> safjaskflasjfklsajfklasjflksajflksjflkasjfksafj </div> <div class=c5> This is all English. This is all English. This is all English. </div> <div class=c5> 全是中文的情况。全是中文的情况。全是中文的情况。 </div> <div class=c5> 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. </div>
<br> .c6{ width:300px;word-break:keep-all; border:1px solid red} <div class="c6"> safjaskflasjfklsajfklasjflksajflksjflkasjfksafj </div> <div class=c6> This is all English. This is all English. This is all English. </div> <div class=c6> 全是中文的情况。全是中文的情况。全是中文的情况。 </div> <div class=c6> 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. </div>
<br> .c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow} <div class="c7"> safjaskflasjfklsajfklasjflksajflksjflkasjfksafj </div> <div class=c7> This is all English. This is all English. This is all English. </div> <div class=c7> 全是中文的情况。全是中文的情况。全是中文的情况。 </div> <div class=c7> 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English. </div>