CODEWITHSUNDEEP
htmlcssxhtml
Jitendra Vyas
Jitendra Vyas

Reputation: 152667

How to break long single word in <td> using CSS?

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.

Upvotes: 31

Views: 46840

Answers (9)

andraaspar
andraaspar

Reputation: 876

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.

Upvotes: 1

Derek Wade
Derek Wade

Reputation: 746

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

Upvotes: 0

Mariusz Ignatowicz
Mariusz Ignatowicz

Reputation: 1672

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.

Upvotes: 4

Dadaso Zanzane
Dadaso Zanzane

Reputation: 6259

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

Upvotes: 4

Baqer Naqvi
Baqer Naqvi

Reputation: 6504

Following code should work;

td {word-break: break-all}

Upvotes: 1

Kausha Mehta
Kausha Mehta

Reputation: 2928

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

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

Upvotes: 9

Tigertron
Tigertron

Reputation: 638

The following works for me:

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

Upvotes: 22

Ben Rowe
Ben Rowe

Reputation: 28711

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.

Upvotes: 34

nicholasklick
nicholasklick

Reputation: 1212

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

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

Upvotes: 7

Related Questions