How to Force Text Wrap Within Table Cells?

How to Enforce Text Wrap within Table Cells

Problem

In a data table with lengthy text in certain cells, the cells expand unilaterally rather than wrapping the text. A CSS class (wrappable) was implemented, but the issue persists. The table is contained within a div, raising the question of whether div and table width manipulation is necessary.

Solution

To force text wrap within table cells, employ the following CSS properties:

<code class="css">table {
  table-layout: fixed;
}

td {
  word-wrap: break-word;
}</code>

Explanation:

• table-layout: fixed ensures that the width of all columns is fixed, preventing cells from expanding horizontally.
• word-wrap: break-word causes text to break and wrap to the next line when a word is too long to fit within the column width.

Example

Here's an example to illustrate the solution:

<code class="html"><style>
  table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 310px;
  }

  td {
    border: solid 1px #fab;
    width: 100px;
    word-wrap: break-word;
  }
</style>

<table border="1">
  <tr>
    <td>1</td>
    <td>Lorem Ipsum</td>
    <td>
      Lorem Ipsum is simply dummy text of the printing and typesetting
      industry.
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown
    </td>
    <td>
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book.
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td></td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna...
    </td>
  </tr>
</table></code>

Conclusion

By implementing table-layout: fixed and word-wrap: break-word, you can easily enforce text wrap within table cells, ensuring that the table layout remains consistent and readable regardless of text length.

The above is the detailed content of How to Force Text Wrap Within Table Cells?. For more information, please follow other related articles on the PHP Chinese website!