CSS系列之文本换行

---

一、word-break

1、概述

CSS 属性 word-break 指定了怎样在单词内断行。

2、语法

word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word;
1
2
3
4

3、属性值

• normal：使用默认的断行规则。【不拆分单词】
• break-all：对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。【拆分单词】
• keep-all：CJK 文本不断行。Non-CJK 文本表现同 normal。【英文单词不拆分，中文文本不换行】
• break-word：他的效果是 word-break: normal 和 overflow-wrap: anywhere 的合，不论 overflow-wrap 的值是多少。

4、示例

<p>1. <code>word-break: normalcode>p>
<p class="normal narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉p>
<p>2. <code>word-break: break-allcode>p>
<p class="breakAll narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉p>
<p>3. <code>word-break: keep-allcode>p>
<p class="keepAll narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉p>
<p>4. <code>word-break: break-wordcode>p>
<p class="breakWord narrow">This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉p>
1
2
3
4
5
6
7
8

.narrow {
	padding: 10px;
	border: 1px solid;
	width: 500px;
	margin: 0 auto;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 1px;
}

.normal {
	word-break: normal;
}

.breakAll {
	word-break: break-all;
}

.keepAll {
	word-break: keep-all;
}

.breakWord {
	word-break: break-word;
}
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

效果如图：

二、overflow-wrap

1、概述

CSS 属性 overflow-wrap 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。

2、语法

overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
1
2
3

3、属性值

• normal：行只能在正常的单词断点处中断。（例如两个单词之间的空格）。【当一行剩余空间无法容纳下一个字（英文是指单词）时，会换行】
• break-word：表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。【针对英文的文本，这个值可以让一个单词拆分开来换行。】
• anywhere：与break-word值相同，表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。

4、示例

<p>They say the fishing is excellent at Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (<code>normalcode>)p>
<p>They say the fishing is excellent at Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (<code>overflow-wrap: anywherecode>)p>
<p>They say the fishing is excellent at Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (<code>overflow-wrap: break-wordcode>)p>
<p>They say the fishing is excellent at Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (<code>word-breakcode>)p>
1
2
3
4

p {
	width: 13em;
	margin: 2px;
	background: gold;
}

.ow-anywhere {
	overflow-wrap: anywhere;
}

.ow-break-word {
	overflow-wrap: break-word;
}

.word-break {
	word-break: break-all;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

效果如图：

三、word-wrap

word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap。word-wrap 现在被当作 overflow-wrap 的“别名”。稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。

四、区别

与word-break相比，overflow-wrap仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！