【CSS】：white-space、word-break、overflow-wrap
【CSS】：white-space、word-break、overflow-wrap
目录
1. white-space
2. word-break
3. overflow-wrap1. white-space
含义：
The white-space CSS property sets how white space inside an element is handled.
语法：
white-space: normal;
white-space: nowrap;
white-space: pre; // 注：pre 是 preserve 的缩写
white-space: pre-wrap;
white-space: pre-line;
示例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<style>
.ws-demo{
width: 200px;
height: 150px;
border: 2px dotted black;
white-space: pre; /*各属性值*/
}
</style>
</head>
<body>
<div class="ws-demo">Hello World!
I live in a very buautiful city
JINAN
</div>
</body>
</html>
小提示：
<pre>标签的浏览器默认 CSS 就是：
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0px;
}小结：
- white-space 属性处理的是空白字符的表现：
- 保留或合并空格；
- 保留或忽略回车；
- 长句子是否自动在空白处折行；
- white-space 的一个作用是控制长句子是否自动在空白处折行，而 overflow-wrap 和 word-break 是作用在单词上，用于控制长单词是否折行。
- Properties that define how words break within themselves: overflow-wrap, word-break。
2. word-break
含义：
The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.
语法：
/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
示例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
</body>
</html>
3. overflow-wrap
含义：
The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
Note1: Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.
Note2: The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias.
语法：
/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
示例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 13em;
margin: 2px;
background: gold;
}
.ow-break-word {
overflow-wrap: break-word;
}
.word-break {
word-break: break-all;
}
</style>
</head>
<body>
<p>They say the fishing is excellent at
Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>normal</code>)</p>
<p>They say the fishing is excellent at
Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p>
<p>They say the fishing is excellent at
Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>word-break</code>)</p>
</body>
</html>
4. overflow-wrap、word-break 辨析
默认情况下，如果一个单词很长，一行中剩下的空间放不下它时，浏览器会把这个单词挪到下一行去显示：
<div class="ws-demo">
this is a lonnnnnnnnnnnnnnnnng word!
</div>
如果 lon...g 这个单词进一步增长到超过容器宽度时，那么它会溢出父容器。
我们给这段文字加上 orverflow-wrap:break-word 属性后：
长单词 lon...g 不再溢出容器边界，而是在边界位置处断开了。
既然 overflow-wrap 能起到让防止长单词溢出的功能，那还要word-break干什么？你看，下图中的lon....g前面不是还有一段空间吗，难道就这样放着？太浪费了。。。
如果再加上 word-break:break-all 属性：
请注意！长单词lon...g并没有被挪到下一行，而是直接放在了a后面，然后在父容器的右边界断开了，一点空间都没有浪费。
