Member Avatar for MARKAND911

How to apply word-wrap in <td> tag.

  • 2 Contributors
  • 1 Reply
  • 124 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by Chronister

Dani AI

Generated

Short answer: the browser will only break cell content if the table is laid out to allow it and the right CSS is used. was on the right track to change styles, but text-wrap is not a real CSS property and relying on inline styles alone can lead to inconsistent results.

A reliable pattern is to give the table a fixed layout (so columns don't expand to fit long strings) and apply wrapping rules to the cell. Example stylesheet and markup:

/* CSS */
table.fixed { table-layout: fixed; width: 100%; }
td.wrap {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-all;   /* optional fallback for very long unbroken strings */
  hyphens: auto;
}

/* HTML */
<table class="fixed">
  <tr>
    <td class="wrap">verylongunbrokenstringlikeaURLorID...</td>
    <td>normal cell</td>
  </tr>
</table>

Notes and troubleshooting:

  • table-layout: fixed is key when columns must respect widths and allow wrapping; without it the table may expand instead of wrapping.
  • overflow-wrap (modern) tells the UA where to break long words. word-break: break-all forces breaks but can split words awkwardly—use it only when necessary.
  • For long URLs, consider HTML <wbr> or inserting zero-width spaces to provide sensible break points, or enable hyphenation with hyphens: auto.
  • If the table is purely layout (not tabular data), switching to CSS grid/flexbox usually yields easier control. If it is tabular data, the above keeps semantics while fixing wrapping.

Further reading: MDN on overflow-wrap and table-layout.

Member Avatar for Chronister

Use a style attribute and add the following

<td style ="text-wrap:normal;word-wrap:break-word">"

Or avoid using tables if possible and use divs to achieve what you want instead. It will be easier to maintain and less likely to break in different browsers.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.