Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →If text in a table header or data cell stays on one line, find the white-space: nowrap (or white-space: pre) declaration affecting that cell or one of its ancestors and override it with white-space: normal. For a long URL or identifier with no spaces, add overflow-wrap: anywhere. On narrow screens, preserve a wide data grid in a keyboard-accessible horizontal scroller instead of forcing every column to become unreadably narrow.
What controls wrapping in table cells?
The white-space property controls whitespace processing and whether lines may wrap. normal permits wrapping at ordinary opportunities such as spaces; nowrap keeps the content on one line. The rule may be attached to th or td, but it can also come from a row, thead, tbody, tfoot, the table itself, or another ancestor.
For example, this section-level rule prevents its cells from wrapping:
tbody {
white-space: nowrap;
}MDN’s table documentation shows this pattern in a responsive example; inspect the cascade rather than changing the table markup. See MDN’s <table> reference.
#1 Best Overall
Restore ordinary wrapping
Apply the least-specific fix that matches your design. To restore wrapping across the table, use:
th,
td {
white-space: normal;
}If a more specific selector or an inline style still wins, remove or override that declaration at the source. Use !important only as a temporary diagnostic, not as the normal solution.
Handle URLs and other unbroken strings
Allowing breaks at spaces does not split a single long URL, hash, filename, product code, or other token. Add an overflow rule when those values can exceed the cell width:
th,
td {
white-space: normal;
overflow-wrap: anywhere;
}overflow-wrap: break-word is an alternative. word-break: break-all is more aggressive because it can split text at almost any character, so use it only when that behavior is acceptable. For a known meaningful location in a long value, insert an HTML <wbr> opportunity. MDN documents these choices in Wrapping and breaking text.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #3
Choose the right text rule
| Need | Rule | Effect and caution |
|---|---|---|
| Normal prose in cells | white-space: normal |
Wraps at normal word opportunities. |
| Keep a value on one line | white-space: nowrap |
Suppresses wrapping; provide a deliberate overflow treatment. |
| Break long URLs or identifiers | overflow-wrap: anywhere or break-word |
Creates breaks when a token would overflow. |
| Split text very aggressively | word-break: break-all |
May break in the middle of ordinary words and reduce readability. |
Check table sizing and layout
Wrapping only helps if the cell has a constrained width. With the default automatic layout, a table can grow to accommodate its contents, so it may remain wider than its container even when a width is specified. MDN’s table-layout reference explains that fixed layout has a predictable effect only when the table has a specified width.
.table {
width: 100%;
table-layout: fixed;
}
.table th,
.table td {
white-space: normal;
overflow-wrap: anywhere;
}Fixed layout can make columns narrower and encourage wrapping, but it can also clip content when combined with fixed heights, overflow: hidden, or ellipsis styles. Those techniques conceal information; do not treat hidden text as a wrapping fix. Remove clipping or ellipsis when every value must remain discoverable.
When a horizontal scroller is better than tighter wrapping
A comparison or data table with many columns may be more usable as a preserved grid that scrolls horizontally on small screens. The W3C Design System states: “The grid structure of data tables must remain intact, no matter the available space.” Its Tables guidance recommends retaining the real table structure and providing scrolling when necessary.
<div class="table-scroll" tabindex="0" aria-label="Scrollable data table">
<table>...</table>
</div>.table-scroll {
max-width: 100%;
overflow-x: auto;
}Keep the semantic table, header associations, and keyboard access. A wrapper with focus support lets keyboard users reach the overflow region; a visible label explains why horizontal scrolling is available.
A practical debugging sequence
- Inspect the failing cell. In browser developer tools, view its computed
white-spacevalue and the matching rule that supplies it. - Trace ancestors. Check the cell, its row,
thead/tbody/tfoot, the table, and other ancestors fornowrap,pre, inline styles, or a higher-specificity selector. - Test the baseline override. Temporarily apply
th, td { white-space: normal; }. If wrapping returns, remove or narrow the original no-wrap rule. - Test long-token handling. If ordinary sentences wrap but a URL still overflows, add
overflow-wrap: anywhereor a deliberate<wbr>. - Evaluate layout. Compare automatic and fixed table layout with a specified table width. Check for clipping, ellipsis, fixed heights, or a container that is itself too wide.
- Choose the mobile behavior. For dense data, test a labeled horizontal scroller before forcing every column into multiple awkward lines.
Common causes that look like a wrapping bug
- A global utility class applies
white-space: nowrapto all table content. white-space: nowrapis set ontbodyor another ancestor, so individual cells inherit it.- The value is one unbroken token; normal wrapping works, but there is no legal break point.
- Automatic table layout expands the table instead of shrinking columns.
- Clipping or ellipsis hides wrapped lines, making the cell appear not to wrap.
Correct the rule that causes the behavior, then decide whether the content needs token breaking or a scrolling grid. That preserves both readable text and the table’s relationships.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
