Word-wrap in an HTML table

html

responsive-design

word-wrap

css-tricks

byAlex Kataev·Mar 14, 2025

To achieve text wrapping in table cells, you will want to apply the word-wrap: break-word; and word-break: break-all; properties in your CSS. This will assure that even the longest of words do not surpass the cell boundaries. Here's an example:

<style>
  td {
    /* 'word-wrap: break-word' teaches words manners */
    word-wrap: break-word;
    /* 'word-break: break-all' enforces manners (Reddit style). Just kidding! It really breaks and wraps words as necessary */
    word-break: break-all;
  }
</style>

<table>
  <tr>
    <td>SuperCalifragilisticExpialidocious</td>
  </tr>
</table>

This and other nifty tips below will help ensure your cells are crowd-friendly-- holding their words in the ring.

Nailing the table layout

Code for unpredictability is like a soup sandwich! Here's how to stomp out unexpected behaviour with table-layout: fixed;:

/* Table-saw setting: Slices columns to a uniform width */
table {
  table-layout: fixed;
  width: 100%;
}

This piece of magic 🎩🐰 secures column widths across the board, giving your layout the rigidity of grandma's fruitcake.

Cross-browser consistency with `word-wrap`

word-wrap is snowflake-sensitive. Here's how to brave the Snow Queen's browser world:

To make Internet Explorer behave, complement word-wrap with the -ms-word-wrap property.
To override any stubborn white-space:nowrap;, assert your dominance with white-space: normal;.

In extreme wrap-or-else situations, a global * { word-wrap: break-word; } could be used. But use this power sparingly, like hot sauce on a taco.

Navy SEAL Strategies for text wrapping

Here are some advanced strategies for when text in td decides to play hide and seek:

Put the text inside a div or span, and set word-break: break-all;. Like an electric fence for your text.
Opt out of overflow: hidden; - no one likes a party pooper that hides overflowing text.
Use dev tools to resolve style conflicts. It's like a Swiss Army knife ⚙️ for web developers.

From tables to divs: The layout evolution

Some tables act like divas, and when yours does, serve it with a div-based layout:

<!-- Flex layout: Does splits better than any gymnast -->
<div style="display: flex;">
  <div style="flex: 1; word-break: break-all;">IAmKindOfABigDeal</div>
</div>