怎么打断长长的单词<td>使用 CSS？

Question

in a td of a table i have a very long single word " Pneumonoultramicroscopicsilicovolcanoconiosis " and i want to reduce the width of table but unable to do because of this long word in one of the td i can break this word by giving <br /> but is there any CSS way to break this word according to available space. without giving line break or edit anything in HTML.

Answer 1

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.

Answer 2

The following works for me:

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

Answer 3

Try the following code for break word if there is not any space.

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

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;
}

Answer 6

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.

Answer 7

以下代码应该可以工作；

td {word-break: break-all}

Answer 8

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).

Answer 9

The modern (post IE) way is:

td {
  overflow-wrap: anywhere;
}

Except that – as of this writing – it is not supported in Safari. Stay tuned.

Here is a test.