How to force table cell `` content to wrap?

html

responsive-design

css

table-layout

byNikita Barsukov·Nov 1, 2024

Quickly force the content within your <td> to wrap by incorporating these CSS directives:

td {
  overflow-wrap: break-word;
  word-break: break-word;
}

The overflow-wrap property works towards breaking the word at the appropriate spot, ensuring it wraps correctly within the table cell. In case, word-break: break-word provides an additional level of support.

Usage example:

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

<table>
  <tr>
    <td>LongTextWithoutInterruptionsWillNowWrapProperly</td>
    <td>As opposed to this, normal text wraps naturally!</td>
  </tr>
</table>

You'll see that even the lengthiest words now wrap effectively, ensuring a neat and user-friendly table presentation.

Deep dive: Meeting your wrapping needs

Setting table layout and constraining cell widths

With a fixed table layout and specified cell widths, control is brought back to your hands:

table {
  table-layout: fixed;
  width: 100%; /* Or specify another width */
}
td {
  width: 25%; /* Adjust as per your layout. For 4 cells, it might be 25% each */
}
/* "I like to MOVE IT, MOVE IT. No more stretchy tables!" - Your HTML code, probably */

The fixed layout combined with border-collapse: collapse gives you a smart and predictably compact display.

Taming content with white-space property

Different white-space property values come into play depending on the scenario:

normal: This default value allows content to wrap at space boundaries.
nowrap: Stops wrapping entirely.
pre-wrap: Preserves white spaces and line breaks, wrapping when necessary.
pre-line: Wraps at line breaks but collapses multiple whitespace characters.

Bootstrap or similar frameworks can significantly streamline responsive design by providing responsive tables that tackle wrapping automatically.

Handling those stubborn cases

Some text content offers resistance to wrapping due to overflow issues or other CSS factors. Here's how to deal:

max-width: Prevent table cells from growing indefinitely and promote wrapping.
overflow: hidden; text-overflow: ellipsis;: Constrain content overflow and provide indication of more content with the ellipsis.
Review the full HTML structure of your page: Unexpected CSS conflicts can affect wrapping behavior.

Nifty tricks for better content presentation

Class application

Ensure your chosen class, such as wrappable, is properly applied:

<td class="wrappable">Wrap me up, Scotty!</td>

Watch your containers

The width of the surrounding div could be influencing your table:

div.container {
  width: 80%; /* Twist the knob and find the width that rocks your socks off */
}

Verify with trusted sources

When in doubt, check W3C's specifications or guides like CSS-Tricks for your CSS properties such as table-layout and white-space.

Combine for robust results

Unleash the power of multiple CSS properties like word-break, overflow-wrap, and table-layout for a wholesome solution.

explain-codes / Html / How to force table cell `` content to wrap?

Linked

Equal sized table cells to fill the entire width of the containing table



Why does overflow:hidden not work in a ``?



Why is a div with "display: table-cell;" not affected by margin?



How can I truncate table cells, but fit as much as content possible?



Display block without 100% width



Td widths, not working?



Css: how do I create a gap between rows in a table?

