How to break a long word in a table TD element?

Question

Here I have a table in which I want to break a long word into multiple lines by changing its cell width (e.g. as 20px), like below:

<table cellspacing="0" cellpadding="1" style="border-collapse: collapse;">
        <tbody>
            <tr >
                <td>
                123
                </td>
                <td>123</td>
                <td style="width: 20px;">
                    canyouhelpmebreakintolineswith20pxwidth?</td>
            </tr>
            <tr>
                <td>
                abc
                </td>
                <td>
                def
                </td>
                <td style="width: 20px;">
                placeholder
                </td>
            </tr>
        </tbody>
</table>

CSS:

table {border-collapse:collapse; table-layout:fixed;}
table td {
  border-width: 1px;
  border:solid 1px; 
  word-wrap:break-word;}

I even made the width of the whole columns as 20 px, and I used table-layout as fixed and word-wrap as break-word, but the cell width still refused to change. Can you please point me where I am wrong?

Below is the JS Fiddle link:

https://jsfiddle.net/flyingbee2012/nxzjof9d/21/

Does this answer your question? [force line break in html table cell](https://stackoverflow.com/questions/6843412/force-line-break-in-html-table-cell) — Heretic Monkey, Mar 08 '21 at 22:20

score 2 · Answer 1 · answered Mar 08 '21 at 22:31

Your property is incorrect. You appear to be trying to use an old Microsoft CSS property that is since removed.

The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias. - MDN

The comparable modern property would either be overflow-wrap: anywhere or word-break: break-word. I'm not familiar enough with the differences between the two, but MDN has a nice breakdown of the related properties (scroll to "Result" to see it in action).

Marius Klein · Accepted Answer · 2021-03-08T23:04:34.163

I think you're trying to implement the solution described here: force line break in html table cell If you want to automatically wrap a word then you have to add the width of the table itself. In your case set the width of the table to 100% to create equal sized columns that automatically wrap. I prepared a small example with 80% width and the 20px column here.

<html>
<body>
    <table cellspacing="0" cellpadding="1" style="border-collapse: collapse;">
        <tbody>
            <tr >
                <td>
                123
                </td>
                <td>123</td>
                <td style="width: 20px">
                    canyouhelpmebreakintolineswith20pxwidth?</td>
            </tr>
            <tr>
                <td>
                abc
                </td>
                <td>
                def
                </td>
                <td>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

And the css:

table {border-collapse:collapse; table-layout:fixed; width: 80%}
table td {
  border-width: 1px;
  border:solid 1px; 
  word-wrap:break-word;}

Thanks Marius. That seems work. I am just wondering if it is possible to set the table width flexibly while being able to resize its individual cell. Interestingly, it would work if I use word-break:break-word like Joseph mentioned; but this is not supported with browsers such as IE. — flyingbee, Mar 09 '21 at 05:12

How to break a long word in a table TD element?

2 Answers2