Html 如何使用 CSS 在 <td> 中打破长的单个单词？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3349887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to break long single word in <td> using CSS?
提问by Jitendra Vyas
in a tdof a tablei have a very long single word "Pneumonoultramicroscopicsilicovolcanoconiosis" and i want to reduce the width of tablebut unable to do because of this long word in one of the tdi can break this word by giving <br />but is there any CSS way to break this word according to available space. without giving line breakor edit anything in HTML.
在其中td一个table我有一个很长的单词“ Pneumonoultramicroscopicsilicovolcanoconiosis”，我想减少宽度table但由于这个长词中的一个而无法做到这一点td我可以通过给予来打破这个词，<br />但有没有任何 CSS 方式来打破这个词根据可用空间。无需换行或编辑 HTML 中的任何内容。
回答by Ben Rowe
Try the following:
请尝试以下操作：
word-wrap: break-word;
white-space: normal;
word-wrap is css3 (however it works in IE). You might not be able to get it working in older browsers however.
自动换行是 css3（但它在 IE 中有效）。但是，您可能无法在较旧的浏览器中使用它。
回答by Tigertron
The following works for me:
以下对我有用：
word-wrap: break-word;
word-break: break-all;
white-space: normal;
回答by Kausha Mehta
Try the following code for break word if there is not any space.
如果没有任何空格，请尝试使用以下代码进行断词。
word-wrap: break-word;
word-break: break-all;
回答by nicholasklick
td span{display:block;width:your_max_width_here.px}
<td><span>Pneumonoultramicroscopicsilicovolcanoconiosis</span></td>
回答by Dadaso Zanzane
try my code --
试试我的代码——
With Table body
带桌身
table>tbody>tr>th{
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
Without Table body
不带表体
table>tr>th{
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
回答by Mariusz Ignatowicz
I've tried different combinations of solutions found here and in other pages but it never worked as expected for me - the short words were split even if they had space on the line below and it looked goofy.
我尝试了此处和其他页面中找到的不同解决方案组合，但对我来说从来没有按预期工作 - 即使它们在下面的行中有空格，短单词也被拆分并且看起来很傻。
Finally I've found this compromise:
最后我找到了这个妥协：
table {
table-layout: fixed;
overflow-wrap: break-word;
word-wrap: break-word; /* IE */
}
If you want to treat your rows equally, it works best.
如果你想平等对待你的行，它效果最好。
回答by Baqer Naqvi
Following code should work;
以下代码应该可以工作；
td {word-break: break-all}
回答by Derek Wade
I found when you have a mixture of content in the cell, some long single words mixed in with other short words, that word-break: break-word;works best. It will break on whitespace when possible. Although this doesn't appear to be supported in IE11. If you set break-all to either of the mentioned properties, it will always break within a word (unless it's lucky enough to be on a space).
我发现当您在单元格中混合内容时，将一些长单词与其他短单词混合在一起时word-break: break-word;效果最佳。如果可能，它将在空白处中断。虽然这在 IE11 中似乎不受支持。如果您将 break-all 设置为上述任何一个属性，它将始终在一个单词内中断（除非它足够幸运地位于一个空格上）。
