網頁排版的中文字換行至少兩個字

發表於 更新於 分類於 Disqus：

前言

最近在前端社團看到一個提問：希望在文字換行時，每一行都至少有兩個字以上，不要只有一個字。原 PO 希望能用 CSS 解決，但感覺做不到。但我後來想到一個 Tricky 的解法，然後需要一點 JS。

方法

主要是在 StackOverflow 看到的提示：在英文句子中，在最後一個字元之前加上空白符號，這樣換行時就會至少有兩個字了。

原理大概是，一般英文句子在換行時，會根據英文單詞為單位作換行的切割。但假如將一段話最後兩個字元中的空格，替代成空白符號的話，那最後兩個單詞就會被黏在一起、被辨識成同一個單位，這樣在換行切割時，就會看起來至少有兩個英文單詞了(但實際上是一個切割單位)。

但轉換成中文句子時會遇到問題：就是中文字之間是沒有空格的。這就很尷尬了。後來我的解決方案是，找一個沒有寬度的空白符號來試看看、碰碰運氣，結果剛好可以。

附上 Demo 連結

小結

如果用這種方式達成中文的換行至少兩字以上，應該是可行的，但就還是需要 JS 的輔助就是了。純 CSS 的方案應該不存在吧(?)