如何在使用CSS中打破长单词？

Question

在td table我有一个很长的单词“ Pneumonoultramicroscopicsilicovolcanoconiosis ”，我想减少table的宽度，但无法因为td中的一个长字，我可以通过给<br />打破这个词但是有任何CSS方法可以根据可用空间来破解这个词。不提供换行符或编辑HTML中的任何内容。

Answer 1

尝试以下方法：

word-wrap: break-word;
white-space: normal;

自动换行是css3（但它适用于IE）。但是，您可能无法在旧浏览器中使用它。

Answer 2

以下适用于我：

    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;

Answer 3

如果没有任何空格，请尝试使用以下代码作为中断词。

word-wrap: break-word;
word-break: break-all;

Answer 4

td span{display:block;width:your_max_width_here.px}

<td><span>Pneumonoultramicroscopicsilicovolcanoconiosis</span></td>

Answer 5

试试我的代码 -

使用表正文

table>tbody>tr>th{
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}

没有表体

table>tr>th{
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}

Answer 6

我尝试了在这里和其他页面中找到的不同解决方案组合，但它从来没有像我预期的那样工作 - 即使它们在下面的行上有空格而且它看起来很傻，所以短语被分开了。

最后我发现了这个妥协：

table {
    table-layout: fixed;
    overflow-wrap: break-word;
    word-wrap: break-word; /* IE */
}

如果你想平等对待你的行，那么效果最好。

Answer 7

以下代码应该有效;

td {word-break: break-all}

Answer 8

我发现当你在单元格中混合了一些内容时，一些长单词与其他短词混合在一起，word-break: break-word;效果最好。它会尽可能在空白处打破。虽然在IE11中似乎不支持这一点。如果你将break-all设置为任何一个提到的属性，它将始终在一个单词中断（除非它有幸在一个空格中）。