有没有什么办法可以让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“打破所有”的单词属性变得更聪明？

回答

相关问题