{ 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