有没有办法让 CSS "break-all" 分词 属性 更聪明？
Is there any way to make the CSS "break-all" word breaking property smarter?
我想让我的 table 适应小屏幕（< 400 像素宽度）所以我将这种样式应用到我的 table 单元格中……
#searchResults td {
padding: 1px;
word-break: break-all;
}
但我的问题是，我可以让这个功能更智能吗？也就是说，请注意在我的 Fiddle、https://jsfiddle.net/hk42jb5r/1/ 中，如果将屏幕缩小到 320 像素宽，名字“Dave Echoer”会将名称分成“Dave Echt”和“er”。因为文本中有一个 space，所以在 space 处进行拆分会更有意义。打破那里的词不会影响 table 宽度。有什么方法可以让我在适当的时候发生这种情况吗？
我在你的例子中使用了这个：
word-break: normal;
overflow-wrap: break-word;
The word-break CSS property is used to specify whether to break lines within words.
Source - Mozilla Developer Network
The overflow-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
Source - Mozilla Developer Network
您似乎想要
的行为
word-break: break-word;
这是一个非标准 属性，受 Chrome 支持，其行为几乎与 word-wrap: break-word 相似。然而，当they tried to remove it，他们注意到
In some cases (tables and display: table; layouts) the
word-break: break-word behavior is different from
word-wrap: break-word; and the former works as expected.
CSS 工作组 resolved 到
Add word-break: break-word to spec if Edge/Firefox find it critical
enough to Web compat to implement it.
所以它可能会成为标准。
但是目前，如果您想要防止 table 单元格至少与最长单词一样宽，并且仍然避免在不需要时打破内部单词，您可以使用
table-layout: fixed;
请注意，这将消除一些特殊的 table 行为，例如所有栏将同样宽，即使它们的内容可以更好地适应其他安排。
我通常不会在这种情况下使用分词，而是将 ­ 标签 (= "soft hyphen") 放入较长的单词中，在适当的连字位置，例如
Hydro­philius Pono­clacti­vizius
所以这将以下列形式之一显示，具体取决于其容器的宽度：
Hydrophilius Ponoclactivizius
或
Hydrophilius Pono-
clactivizius
或
Hydrophilius
Ponoclacti-
vizius
或
Hydro-
philius
Pono-
clacti-
vizius
我想让我的 table 适应小屏幕（< 400 像素宽度）所以我将这种样式应用到我的 table 单元格中……
#searchResults td {
padding: 1px;
word-break: break-all;
}
但我的问题是，我可以让这个功能更智能吗？也就是说，请注意在我的 Fiddle、https://jsfiddle.net/hk42jb5r/1/ 中，如果将屏幕缩小到 320 像素宽，名字“Dave Echoer”会将名称分成“Dave Echt”和“er”。因为文本中有一个 space，所以在 space 处进行拆分会更有意义。打破那里的词不会影响 table 宽度。有什么方法可以让我在适当的时候发生这种情况吗？
我在你的例子中使用了这个：
word-break: normal;
overflow-wrap: break-word;
The
word-breakCSS property is used to specify whether to break lines within words.Source - Mozilla Developer Network
The
overflow-wrapproperty is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.Source - Mozilla Developer Network
您似乎想要
的行为word-break: break-word;
这是一个非标准 属性，受 Chrome 支持，其行为几乎与 word-wrap: break-word 相似。然而，当they tried to remove it，他们注意到
In some cases (tables and
display: table;layouts) theword-break: break-wordbehavior is different fromword-wrap: break-word;and the former works as expected.
CSS 工作组 resolved 到
Add
word-break: break-wordto spec if Edge/Firefox find it critical enough to Web compat to implement it.
所以它可能会成为标准。
但是目前，如果您想要防止 table 单元格至少与最长单词一样宽，并且仍然避免在不需要时打破内部单词，您可以使用
table-layout: fixed;
请注意，这将消除一些特殊的 table 行为，例如所有栏将同样宽，即使它们的内容可以更好地适应其他安排。
我通常不会在这种情况下使用分词，而是将 ­ 标签 (= "soft hyphen") 放入较长的单词中，在适当的连字位置，例如
Hydro­philius Pono­clacti­vizius
所以这将以下列形式之一显示，具体取决于其容器的宽度：
Hydrophilius Ponoclactivizius
或
Hydrophilius Pono-
clactivizius
或
Hydrophilius
Ponoclacti-
vizius
或
Hydro-
philius
Pono-
clacti-
vizius