html - 在 HTML 中，如何在 . （点），就像它包裹在 - （破折号）？

Question

我在表格单元格中有一个很长的词，它弄乱了表格布局：

a.long.word.separated.by.dots

我希望这个词像这个词一样换行：

用破折号分隔的长词

如何在不更改 HTML 的情况下使用 CSS 完成这项工作？

Answer 1

如果使用JS没问题，你可以这样做。如果不是，那么这个答案可能对未来的读者仍然有用。

var longWord = "a.long.word.separated.by.dots".replace(/\./g, '.<wbr>');

wbr 标签上的参考：http: //www.w3.org/wiki/HTML/Elements/wbr

或者，您可以<wbr>在每个句点之后手动放置一个。

Answer 2

您可以在 PHP 中执行此操作，很抱歉唤醒了一个死问题，但如果您使用 PHP 循环填充 HTML 表，您只需要以下内容：

preg_replace('/\./', '.<wbr>', $string);

这需要11684 的答案并将其放入请求的上下文中。

Answer 3

<wbr>对我不起作用，但零宽度空间可以。您可以使用：

var longWord = "a.long.word.separated.by.dots".replace(/\./g, '.​');

Answer 4

您可以使用这个 CSS3 属性：

table tr td {
    word-wrap: break-word;
}

浏览器支持：http ://caniuse.com/#search=word-wrap