{ Hello Magento 2 }

解决 Magento 2 应用问题，更注重深度挖掘。(ง •̀_•́)ง

0%

overflow-wrap 和 word-break

发表于 分类于

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!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