Word-Wrap in an HTML Table: Fixing Unwrapped Text

Word-wrap is a CSS property used to enable text to wrap within elements like divs and spans. However, it often fails to work in table cells, causing text to overflow the cell's bounds.

To address this issue, you can use the table-layout: fixed CSS attribute for the table. This attribute forces the table to have a fixed layout, allowing its cells to properly accommodate wrapped text.

Here's an updated code snippet that demonstrates the fix:

With this modification, the long word will now wrap within the table cell, respecting its boundaries and preventing overflow.