Question

我正在尝试让我的桌子适合小屏幕（<400像素宽度），所以我将这种风格应用到我的桌子单元格......

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

但我的问题是，我可以让这个功能变得更聪明吗？也就是说，请注意我的小提琴，https://jsfiddle.net/hk42jb5r/1/，如果你将屏幕缩小到320像素宽，那么名字“Dave Echoer”将名称分为“Dave Echt”和“er”。因为文本中有空格，所以在空间中进行拆分会更有意义。打破这个词不会影响表格宽度。有什么方法可以让它在适当的时候发生吗？

Answer 1

似乎你想要

的行为

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至

如果Edge / Firefox发现它至关重要，请将word-break: break-word添加到规范足以让Web compat实现它。

所以它可能成为标准。

但是目前，如果你想防止表格单元格至少与最长单词一样宽，并且在没有必要时仍然避免破坏单词内容，你可以使用

table-layout: fixed;

请注意，这将消除一些特殊的表行为，例如：所有列都将同样宽，即使它们的内容在其他安排中更适合。

Answer 2

我在你的例子中使用了这个：

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

word-break CSS属性用于指定是否在单词中断行。

来源 - Mozilla Developer Network

overflow-wrap属性用于指定浏览器是否可以在单词中断行，以防止在其他不可破解的字符串太长而无法放入其包含框中时溢出。

来源 - Mozilla Developer Network

Answer 3

我通常不会在这种情况下使用分词，而是将标签（=＆＃34;软连字符＆＃34;）放入较长的单词中，在连字符的位置是合适的，比如

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

因此，这将以下列形式之一显示，具体取决于其容器的宽度：

Hydrophilius Ponoclactivizius

或

Hydrophilius Pono-
clactivizius

或

Hydrophilius 
Ponoclacti-
vizius

或

Hydro-
philius 
Pono-
clacti-
vizius

有没有办法让CSS“打破所有”这个词破坏财产更聪明？

3 个答案: