overflow-wrap 和 word-break

overflow-wrap 和 word-break 都是用于长单词断句的。

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<style type="text/css">
    p {
        width: 300px;
        background-color: #f9f2f4;
        color: #c7254e;
    }
    .overflow-wrap {
        overflow-wrap: break-word;
    }
    .word-break {
        word-break: break-all;
    }
</style>
<body>

<p >浏览器默认情况下:<br/>ThankIT, Hello, How are yoooooooooooooooooooooooooooooooooooooooooooooooooooou?</p>
<p class="overflow-wrap">overflow-wrap:break-word<br/>ThankIT, Hello, How are yoooooooooooooooooooooooooooooooooooooooooooooooooooou?</p>
<p class="word-break">break-word:break-all<br/>ThankIT, Hello, How are yoooooooooooooooooooooooooooooooooooooooooooooooooooou?</p>
</body>
</html>

默认情况下,如果一个单词很长,导致一行中剩下的空间放不下的时候,浏览器就会把该单词移到下一行,如果宽度还是超出父元素,就会溢出。

overflow-wrap 最早叫 word-wrap ,最早是 IE 的特性。现在 word-wrap 作为 overflow-wrap 的别名,几乎所有浏览器都支持。在断句的时候,会首先将长单词挪到下一行,然后下一行再放不下则断开。

word-break 则是不考虑换行,充分利用空间,简单粗暴。

参考文档

内有案例可查看其他值的效果
overflow-wrap
word-break

发表评论

电子邮件地址不会被公开。 必填项已用*标注