3

我试图让我的表格适合一个小屏幕（< 400 像素宽度），所以我将这种样式应用于我的表格单元格......</p> 

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

但我的问题是，我可以让这个功能更智能吗？也就是说，请注意我的 Fiddle，https ://jsfiddle.net/hk42jb5r/1/，如果您将屏幕缩小到 320，第一个名称“Dave Echoer”会将名称分解为“Dave Echt”和“er”像素宽。因为文本中有一个空格，所以在空格处进行拆分会更有意义。打破那里的单词不会影响表格宽度。有什么办法可以让我在适当的时候发生这种情况？

4

3 回答 3

3

看来你想要的行为

word-break: break-word;

它是 Chrome 支持的非标准属性，其行为几乎类似于word-wrap: break-word. 然而，当他们试图删除它时，他们注意到

在某些情况下（表格和display: table;布局）， word-break: break-word行为与前者不同， word-wrap: break-word;前者按预期工作。

CSS WG决定

word-break: break-word如果 Edge/Firefox 发现它对 Web 兼容足够重要以实现它，请添加到规范中。

所以它可能会成为标准。

但是目前，如果您想防止表格单元格至少与最长单词一样宽，并且在不需要时仍然避免打破单词内部，您可以使用

table-layout: fixed;

请注意，这将消除一些特殊的表格行为，例如所有列的宽度相同，即使它们的内容可以更好地适应其他排列。

于 2016-10-04T22:45:00.717 回答
0

我在你的例子中得到了这个：

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

word-breakCSS 属性用于指定是否在单词中换行。

来源 - Mozilla 开发者网络

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

来源 - Mozilla 开发者网络

于 2016-10-04T22:24:20.780 回答
0

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

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

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

Hydrophilius Ponoclactivizius

或者

Hydrophilius Pono-
clactivizius

或者

Hydrophilius 
Ponoclacti-
vizius

或者

Hydro-
philius 
Pono-
clacti-
vizius
于 2016-10-05T00:18:11.203 回答