word-break:break-all的问题与处理示意实例页面

展示

去论坛 »

随意中断单词，降低阅读体验

本节会大量出现“CJK文本”这个词。

//zxx: 由于不同系统下字体不同可能会导致上下两端换行表现一致，此时可以适当增加p元素宽度体验效果

word-break:break-all对连续破折号无效

本节会大量出现“CJK文本”这个词。———————————————

//zxx: 上面两个案例的下面一段话都应用了CSS word-break:break-all

同时应用word-wrap:break-word

本节会大量出现“CJK文本”这个词。———————————————

应用line-break:anywhere

本节会大量出现“CJK文本”这个词。———————————————

代码

HTML：

<h4>随意中断单词，降低阅读体验</h4>
<p>本节会大量出现“CJK文本”这个词。</p>
<p class="break-all">本节会大量出现“CJK文本”这个词。</p>

<h4>word-break:break-all对连续破折号无效</h4>
<p>本节会大量出现“CJK文本”这个词。———————————————</p>
<p class="break-all">本节会大量出现“CJK文本”这个词。———————————————</p>

<h4>同时应用word-wrap:break-word</h4>
<p class="break-all break-word">本节会大量出现“CJK文本”这个词。———————————————</p>

<h4>应用line-break:anywhere</h4>
<p class="line-break">本节会大量出现“CJK文本”这个词。———————————————</p>

CSS：

p {
    width: 140px;
    padding: 10px;
    border: solid deepskyblue;
}
.break-all {
    word-break: break-all;
}
.break-word {
    width: 8em;
    word-wrap: break-word;
}
.line-break {
    width: 8em;
    line-break: anywhere;
}