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

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/

htmlcsshtml-table


Solution 1:[1]

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

Solution 2:[2]

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

Solution 3:[3]

You can break a long word into multiple lines by using the word-break property. The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.

word-break: break-all; property specifies word may be broken at any character to prevent overflow.

<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse:collapse; 
    table-layout: fixed;
}
table td {
  border-width: 1px;
  border:solid 1px;
  word-break: break-all;}
</style>
</head>
<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>
                placeholder
                </td>
            </tr>
        </tbody>
</table>
</body>
</html>

Solution 4:[4]

There are many ways to do this

? Breaking words with word-wrap and max-width

? Breaking words with word-wrap and table-layout

? Breaking words with word-break

? Make breaks more elegant using CSS hyphens

Go through below link https://www.design-fluide.com/09-12-2018/how-to-break-long-words-in-an-html-or-css-table/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Joseph Marikle
Solution 3 Purvi Barot
Solution 4 Nensi Gondaliya

Related Questions