單詞之間的區別：break-word和word-break：break-word

我需要在某處修復某些CSS，因爲我的文本沒有環繞，而是無限地繼續，如果它是一個非常長的單詞。單詞之間的區別：break-word和word-break：break-word

和大多數情況一樣，我在我的CSS文件中嘗試了word-wrap: break-word;，但它不起作用。

然後，令我驚訝的是，在Google Chrome開發者工具的建議下，我嘗試了word-break: break-word;，它解決了我的問題。我對此感到震驚，所以我一直在Google上搜索以瞭解這兩者之間的差異，但我在這個主題上看不到任何東西。

此外，我不認爲word-break: break-word;是記錄的行爲，看到如何W3沒有提及它。我在Safari和Chrome上測試過它，它在兩者上都能很好地工作，但我很猶豫使用word-break: break-word;，因爲我在任何地方都看不到它。

來源

2016-02-07 David

更新

如果你打算打破的話，想連字符爲好，請嘗試以下操作：

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

這個工作，即使在Chrome瀏覽器...之類的... SANS連字符。。無論如何詳細的解釋是在這article。

word-break:break-word沒有記錄，只有主開發人員知道這個超級祕密技術，如 顫抖的死亡之謎。

其實它是一個不起眼的-webkit-屬性，它的作用類似word-wrap: break-word，但它也用於動態長度。

Kenneth.io - Word Wrapping Hypernation Using CSS

CSS-Tricks - word-break

從CaniUse：

鉻，Safari和其他的WebKit /閃爍瀏覽器還支持其像word-wrap: break-word處理的非官方break-word值。

來源

2016-02-07 08:28:40 zer00ne

我明白了。我猜它對我的作用是因爲「它也用於動態長度」。我需要以某種方式糾正這種情況，以便我可以使用'word-wrap：break-word;'我寧願不依賴於所有相關瀏覽器都沒有正式記錄/支持的內容。 – David

如果你打破了話，我想你也想連字符。查看我的帖子中的更新。 – zer00ne

單詞之間的區別：break-word和word-break：break-word

回答

相關問題