1. word-wrap
CSS3屬性，允許或者
換行到下一行。
1.1 基本屬性值
| 屬性值 | 說明 |
|---|---|
| normal | 只在允許的斷字點換行（瀏覽器保持默認(rèn)處理） |
| break-word | 在長單詞或 URL 地址內(nèi)部進(jìn)行換行。 |
1.2 應(yīng)用示例
QQ圖片20190422161509.png
<div class="p1 p">
the only Chinese-speaking tour guide at the visitor center of the UN headquarters
聯(lián)合國總部游客中心唯一一位說中文的導(dǎo)游。
</div>
<div class="p2 p">
the only Chinese-speaking tour guide at the visitor center of the UN headquarters
聯(lián)合國總部游客中心唯一一位說中文的導(dǎo)游。
</div>
</body>
<style>
.p {
width: 90px;
margin: 20px 100px;
border: 1px solid #dedede;
float: left;
}
.p1 {
word-wrap: normal;
}
.p2 {
word-wrap: break-word;
}
1.3 其他
-
word-wrap已經(jīng)被W3C規(guī)范為overflow-wrap了，各瀏覽器支持情況如下：
F35035B0-6EC2-4315-8AB0-F218A597C489.png word-wrap必須在white-space屬性支持換行的前提下才能起到作用(默認(rèn)是換行的)
2. word-break
CSS3屬性，規(guī)定自動換行的處理辦法
2.1 基本屬性值
| 屬性值 | 說明 |
|---|---|
| normal | 使用瀏覽器默認(rèn)的換行規(guī)則。 |
| break-all | 允許在單詞內(nèi)換行。 |
| keep-all | 只能在半角空格或連字符處換行。不是別中文自動換行，所以要慎重使用。 |
2.2 應(yīng)用示例
F415EF48-5620-49c4-9421-81CA71F8FDD3.png
<div class="p1 p">
the only Chinese-speaking tour guide at the visitor center of the UN headquarters
聯(lián)合國總部游客中心唯一一位說中文的導(dǎo)游。
</div>
<div class="p2 p">
the only Chinese-speaking tour guide at the visitor center of the UN headquarters
聯(lián)合國總部游客中心唯一一位說中文的導(dǎo)游。
</div>
<div class="p3 p">
the only Chinese-speaking tour guide at the visitor center of the UN headquarters
聯(lián)合國總部游客中心唯一一位說中文的導(dǎo)游。
</div>
.p {
width: 90px;
margin: 20px 60px;
border: 1px solid #dedede;
float: left;
}
.p1 {
word-break: normal;
}
.p2 {
word-break: break-all;
}
.p3 {
word-break: keep-all;
}
2.3 其他
- word-break必須在white-space屬性支持換行的前提下才能起到作用(默認(rèn)是換行的)
3. white-space
設(shè)置如何處理元素內(nèi)的空白
3.1 基本屬性值
| 屬性值 | 說明 |
|---|---|
| normal | 默認(rèn)?？瞻讜粸g覽器忽略。 |
| nowrap | 文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 br標(biāo)簽為止。 |
| pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標(biāo)簽。 |
| pre-wrap | 保留空白符序列，但是正常地進(jìn)行換行。 |
| pre-line | 合并空白符序列，但是保留換行符。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。 |
3.2 應(yīng)用示例
34D850CA-A8A4-49ed-912C-BB139CF8E9A2.png
<div class="p1 p">
the only Chinese-speaking tour guide at the visitor center of the UN headquarters
聯(lián)合國總部游客中心唯一一位說中文的導(dǎo)游。
</div>
<div class="p2 p">
the only Chinese-speaking tour guide at the visitor center of the UN headquarters
聯(lián)合國總部游客中心唯一一位說中文的導(dǎo)游。
</div>
<div class="p3 p">
the only Chinese-speaking tour guide at the visitor center of the UN headquarters
聯(lián)合國總部游客中心唯一一位說中文的導(dǎo)游。
</div>
<div class="p4 p">
the only Chinese-speaking tour guide at the visitor center of the UN headquarters
聯(lián)合國總部游客中心唯一一位說中文的導(dǎo)游。
</div>
<div class="p5 p">
the only Chinese-speaking tour guide at the visitor center of the UN headquarters
聯(lián)合國總部游客中心唯一一位說中文的導(dǎo)游。
</div>
.p {
width: 90px;
margin: 20px 100px;
border: 1px solid #dedede;
}
.p1 {
white-space: normal;
}
.p2 {
white-space: nowrap;
}
.p3 {
white-space: pre;
}
.p4 {
white-space: pre-wrap;
}
.p5 {
white-space: pre-line;
}
3.3 其他
- white-space其實針對自動換行、換行、空白符進(jìn)行了設(shè)置，通過設(shè)置不同的屬性值，這三者支持會有所不同：
| 屬性值 | 換行符 | 自動換行 | 空格符 |
|---|---|---|---|
| normal | no | yes | no（合并） |
| nowrap | no | no | no（合并） |
| pre | yes | no | yes |
| pre-wrap | yes | yes | yes |
| pre-line | yes | yes | no（合并） |
- IE瀏覽器下（包括IE8）都不支持inherit屬性，建議慎用。
總結(jié)
word-wrap（overflow-wrap）: 定義過長單詞是否換行。
word-break: 定義自動換行的時候是否可以拆分單詞。
white-space: 設(shè)置如何處理自動換行、換行符、空白符。
示例源碼地址：
- http://www.freerf.top/study/html5/css3/word-wrap/index.html
- http://www.freerf.top/study/html5/css3/word-break/index.html
- http://www.freerf.top/study/html5/css3/white-space/index.html
參考文獻(xiàn)
https://www.quackit.com/css/css3/properties/css_overflow-wrap.cfm
https://www.cnblogs.com/dfyg-xiaoxiao/p/9640422.html
