How to add word-wrap in an HTML table?

Spread the love

Sometimes, we want to add word-wrap in an HTML table.

In this article, we’ll look at how to add word-wrap in an HTML table.

How to add word-wrap in an HTML table?

To add word-wrap in an HTML table, we set the word-wrap CSS property to break-word.

For instance, we write

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

to add word-wrap: break-word to the td element to make its contents wrap to a new row if it’s too long.

Conclusion

To add word-wrap in an HTML table, we set the word-wrap CSS property to break-word.

Leave a Reply

Your email address will not be published. Required fields are marked *