有沒有什麼辦法可以讓CSS「打破所有」的單詞屬性變得更聰明？

我試圖讓我的表，以適應小屏幕（< 400像素的寬度），所以我採用這種風格到我的表格單元格...有沒有什麼辦法可以讓CSS「打破所有」的單詞屬性變得更聰明？

#searchResults td { 
    padding: 1px; 
    word-break: break-all; 
}

但我的問題是，我可以讓這個功能更聰明？也就是說，請注意在我的小提琴https://jsfiddle.net/hk42jb5r/1/中，如果將屏幕寬度縮小到320像素，名字「Dave Echoer」將名稱分爲「Dave Echt」和「呃」。由於文本中有一個空格，因此在該空間發生拆分會更有意義。打破這個詞不會影響表格的寬度。有什麼辦法可以讓它在適當的時候發生？

來源

2016-10-04 Dave

看來你想要的

word-break: break-word;

行爲是由Chrome支持非標準屬性，它的行爲幾乎像word-wrap: break-word。然而，當they tried to remove it，他們注意到

在某些情況下（表和display: table;佈局）的 word-break: break-word行爲是 word-wrap: break-word;不同，前者按預期工作。

的CSS WG resolved到

添加word-break: break-word符合規格，如果邊緣/ Firefox中發現它的關鍵足夠的Web COMPAT來實現它。

因此它可能成爲標準。

但目前，如果你想防止表細胞是至少一樣寬最長的單詞，而且還避免裏面的話打破時，它不是必需的，你可以使用

table-layout: fixed;

注這將擺脫一些特殊的表格行爲，例如即使其內容能夠更好地適應其他安排，所有欄目也將同樣寬。

來源

2016-10-04 22:45:00 Oriol

我在你的榜樣得到這個工作有：

word-break: normal; 
overflow-wrap: break-word;

的word-break CSS屬性用於指定是否斷詞內行。

源 - Mozilla Developer Network

的overflow-wrap屬性用來指定瀏覽器是否可能破裂字線內，以防止溢出當否則牢不可破字符串太長，以適應其容納箱。

來源 - Mozilla Developer Network

來源

2016-10-04 22:24:20

但是'溢出包裝：盈虧word'不允許細胞萎縮比最長的單詞窄。在這種情況下，與沒有使用它相比，我看不出什麼區別。 – Oriol

我通常不使用在這樣的情況下字斷，而是把標籤（=「軟連字符」）進入較長的話，在這裏一個連字符是適當的位置，像

Hydro&shy;philius Pono&shy;clacti&shy;vizius

因此，這將顯示在以下形式中的一種，這取決於它的容器的寬度：

Hydrophilius Ponoclactivizius

或

Hydrophilius Pono- 
clactivizius

或

Hydrophilius 
Ponoclacti- 
vizius

或

Hydro- 
philius 
Pono- 
clacti- 
vizius

來源

2016-10-05 00:18:11 Johannes

對於不同的問題，這是一個很好的答案。當這個詞斷裂時，我不認爲OP在那裏想要連字符。 –

有沒有什麼辦法可以讓CSS「打破所有」的單詞屬性變得更聰明？

回答

相關問題