CSS 中的更智能斷詞？

Question

如果我只是將word-break: break-all放在一個元素上，我通常會得到這樣的結果：

大家好，我正在打字
聖人太長了，不適合！

顯然這會更好：

大家好，我正在輸入
消息太長，無法容納！

但與此同時，如果有人寫道：

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊！！！！！！

然后我希望它是：

BLAAAAAAAAARRRRRRRRRRRR
嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎！！！！！！

我似乎找不到真正做到這一點的方法。

請注意，元素的寬度不是固定的，可能會發生變化。

Answer 1

嘗試word-break: break-word; 它應該按照您的預期運行。

Answer 2

對於我們的很多項目，我們通常在必要時添加：

.text-that-needs-wrapping {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

它處理不同瀏覽器的大多數奇怪情況。

Answer 3

更新后的答案應該是：

overflow-wrap:break-word;

它會破壞一個本身無法容納在自己的行中的單詞，但保留所有其他單詞（請參閱 此處的溢出包裝）。

您還可以使用：

overflow-wrap:anywhere; 但這將允許在任何單詞后換行，以減少元素的寬度。 請參閱以下 MDN 中描述的差異：

[break-word is] 與anywhere值相同，如果行中沒有其他可接受的斷點，則允許在任意點打破通常不可破壞的單詞，但在計算時不考慮由單詞break引入的軟換行機會最小內容內在大小。

此外，Internet Explorer、Safari 和某些移動瀏覽器不支持anywhere ，而所有主要瀏覽器都支持break-word （請參閱 [此處][2]）。

word-break: break-word; 不應再使用它，因為它已被棄用，取而代之的是overflow-wrap:break-word; . 現在， word-break屬性旨在用於當您想要中斷單詞時，無論它們是否適合自己的行（即 OP 的第一個帶有word-break: break-all的示例。

與 word-break 相比，overflow-wrap 只會在整個單詞不能放在它自己的行上而不溢出的情況下才會創建一個 break。

（來自 上面也鏈接的溢出包裝）

Answer 4

對於智能分詞，或首先要正確分詞，您需要與語言相關的規則。 對於英語和許多其他語言，正確的斷行意味着斷字，斷行時在行尾添加連字符。

在 CSS 中，您可以使用hyphens: auto ，盡管您仍然需要使用供應商前綴來復制它。 由於這在 IE 9 上不起作用，您可以考慮使用基於 JavaScript 的連字符，例如 Hyphenate.js。 在這兩種情況下，都必須使用語言標記（ lang屬性）。

打斷長的、不可連字符的字符串是一個不同的問題。 最好在預處理中處理它們，但在簡單的設置中， word-break: break-word （這意味着不正確的斷詞，例如英語）可能被視為緊急情況。

Answer 5

這就是你要找的：

.break-word {
-ms-word-break: break-all;
-ms-word-wrap: break-all;
-webkit-word-break: break-word;
-webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

Answer 6

overflow-wrap: anywhere; 是你需要的。