關於標點符號把文字帶着換行的問題解決方案
出現的問題
最近在弄一個介紹頁面的時候遇到一個很巧的問題，在文本換行的時候剛好能夠放下文字，但是標點符號把這個文字帶着換行了
如下圖所示：
如果的在上一行顯示，那么句號就應該在下一行顯示，然而句號是避首標點，不能出現在開頭。因此，“的”字就被帶到下一行了
中文標點的這種換行特性，即使設置word-break:break-all也是無效的，此時需要用到的CSS屬性是line-break。
line-break屬性簡介
line-break屬性主要用中日韓3種語言中，其中以中文和日文為主
語法如下：
.class {
/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;
/* Global values */
line-break: inherit;
line-break: initial;
line-break: unset;
}
特性：
| 初始值 | auto |
|---|---|
| 適用元素 | 所有元素 |
| 是否是繼承屬性 | 是 |
| 計算值 | as specified |
| Animation type | discrete |
語法
| 值 | 介紹 |
|---|---|
| auto | 使用默認的斷行規則分解文本 |
| loose | 使用盡可能松散（least restrictive）的斷行規則分解文本。一般用於短行的情況，如報紙。 |
| normal | 使用最一般（common）的斷行規則分解文本。 |
| strict | 使用最嚴格（stringent）的斷行原則分解文本。 |
| anywhere | 在每個印刷字符單元（typographic character unit）的周圍，都有一個自動換行（soft wrap）的機會，包括任何標點符號（punctuation character）或是保留的空白字符（preserved white spaces），或是單詞之間。但忽略任何用於阻止換行的字符，即使是來自 GL、WJ 或 ZWJ 字符集的字符，或是由 word-break 屬性強制的字符。不同的換行機會擁有相同的優先級。也不應用斷字符（hyphenation，可能是 "-"） |
最后
這里我們只需要在css中加上 line-break: anywhere; 就好了
.class {
line-break: anywhere;
}
效果如下：
