How to Make Long Text Wrap in HTML Table Cells?

Word-Wrap in HTML Tables: Breaking Long Text within Cells

Word-wrap is a valuable CSS property that enables text to wrap within specified containers, such as divs and spans. However, its functionality can become compromised when applied to table cells. In certain scenarios, text may overflow the boundaries of the cell instead of wrapping as intended.

In this case, the issue stems from the default behavior of table-cell elements. By default, HTML tables are designed for tabular data, and their content is intended to fit within the specified width of each column. Consequently, when text exceeds the width of a cell, it is rendered outside the cell's bounds.

To address this problem, one solution involves adding the table-layout: fixed CSS attribute to the table element. This attribute instructs the browser to fix the table's layout, preventing cells from expanding beyond their defined width. As a result, text within cells is forced to wrap when it reaches the specified cell width.

Here's the updated code snippet with the table-layout: fixed attribute applied:

After incorporating this change, the long word in the first column will now wrap within the cell's boundaries, preventing it from extending beyond the table's width.

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