• Post category:HTML

2 Easy Ways to Wrap Table Cell Content Using HTML

Wrap Text in Table HTML

In this article, we will see how to wrap the text if it leaves the table cell in HTML.

What is the wrap text in the table?

Wrapping the text or content in a table cell is called wrapping text in the table. For example, if you create a table and write long words without space inside the cells, the word will be displayed in one line without wrapping the long words. So, you should wrap it by using “word-break” or “word-wrap” properties then it will display the next line. We can also wrap the <div>, <p>, <span> content in CSS.

Wrapped text

after using the word-wrap property
The wrap text display is similar to the above image. The wrap text never leaves the table cells.

Unwrapped text

before using word-wrap property

The unwrap text display is similar to the above image. This text leaves the table cells.

When do we need to wrap text in the table?

  • If your content is longer than the width of the cell, then you should wrap the text in a table cell.
  • Wrapping text ensures that all the content is visible within the cell’s boundaries. This is especially useful for displaying text like our long paragraphs or explanations.
  • And if you put a text in the table cell without space then the text won’t wrap and it appear outside of that text cell.

For example:

<html>
<head>
   <title>Table without Wrap</title>
<style>
   table {
      border-spacing: 0px;
      table-layout: fixed;
   }
</style>

<table border="1" width="200">
   <tr>
      <th>Name</th>
      <th>Place</th>
   </tr>
   <tr>
      <td>John</td>
      <td style="color: red;">UnitedStatesOfAmerica</td>
   </tr>
   <tr>
      <td>Bob</th>
      <td>Canada</td>
   </tr>
   <tr>
      <td>Alex</td>
      <td span style="color: red;">UnitedKingdom </td>
   </tr>         
</table>

</body>
</html>

If you set fixed width of the table and had long content without space like this above code, it would display like this:

wrap text in table html

The red color text has moved out of the table cell, so you need to wrap the text in the table.

How to wrap text in the table?

We can use CSS “word-break” property and “word-wrap” property to wrap the word in the table cell. Let’s see how to wrap text using these two methods with an example:

Method 1. Using word-wrap property:

To wrap all <td> element text in the table, we need to select <td> tag using CSS element selector and set property “word-wrap” to “break-word”, like:

td {
  word-wrap: break-word;
}

For example:

CSS:

table {
  border-spacing: 0px;
  table-layout: fixed;
}
td {
  word-wrap: break-word;
   }

HTML:

<table border="1" width="200">
   <tr>
      <th>Name</th>
      <th>Place</th>
   </tr>
   <tr>
      <td>John</td>
      <td style="color: red;">UnitedStatesOfAmerica</td>
   </tr>
   <tr>
      <td>Bob</th>
      <td>Canada</td>
   </tr>
   <tr>
      <td>Alex</td>
      <td span style="color: red;">UnitedKingdom </td>
   </tr>         
</table>

Output:

wrap text in table html
Steps:

  1. In this above code, we have created the table with a width of 200px and applied the table layout as fixed.
  2. Then we have the text “UnitedStatesOfAmerica” and “UnitedKingdom” in the table <td> tag without spacing.
  3. To wrap that text, we have set the property “word-wrap” to “break-word” for all <td> tags in CSS.
  4. See, the above output, the text is wrapped successfully.

Method 2. Using word-break property

We can also use the word-break property to wrap the text by setting the ‘word-break‘ property to ‘break-all‘, like:

td {
  word-break: break-all;
}

CSS:

table {
   border-spacing: 0px;
   table-layout: fixed;
}
td {
   word-break: break-all;
   }

HTML:

<table border="1" width="200">
   <tr>
      <th>Name</th>
      <th>Place</th>
   </tr>
   <tr>
      <td>John</td>
      <td style="color: red;">UnitedStatesOfAmerica</td>
   </tr>
   <tr>
      <td>Bob</th>
      <td>Canada</td>
   </tr>
   <tr>
      <td>Alex</td>
      <td span style="color: red;">UnitedKingdom </td>
   </tr>         
</table>

Output:

wrap text in table html

In the above code, we set the “word-break” property to “break-all” for all <td> tags to wrap all <td> text.

Conclusion

I recommended the word-wrap property because it wraps the word on a new line.

Leave a Reply