Disable Word Wrapping in HTML with white-space: nowrap

To disable word wrapping in HTML, you need to use the white-space: nowrap CSS property instead of word-wrap. This property prevents text from wrapping to the next line, forcing the entire content to remain on a single line. When text overflows, you’ll typically want to combine this with overflow handling techniques like overflow: hidden and text-overflow: ellipsis for better user experience.

Contents

• The Solution: Using white-space: nowrap
• Why word-wrap Cannot Disable Wrapping
• Handling Text Overflow
• Modern Alternative: text-wrap: nowrap
• Complete Code Example
• Browser Compatibility

The Solution: Using white-space: nowrap

The correct CSS property to disable word wrapping is white-space: nowrap. This property instructs the browser to render all text content on a single line, preventing any automatic line breaks regardless of container width. Unlike word-wrap which only controls how text breaks when it overflows, white-space: nowrap fundamentally changes the wrapping behavior.

The basic implementation is straightforward:

.no-wrap {
 white-space: nowrap;
}

This simple declaration will force all text within the element to remain on one line. You can apply this class to any HTML element where you want to prevent text wrapping, such as table cells, navigation items, or badges.

The white-space property controls how white space inside an element is handled. While nowrap is the value that prevents wrapping, it also inherits other behaviors from the white-space property, such as collapsing multiple spaces into a single space.

Why word-wrap Cannot Disable Wrapping

Your understanding that word-wrap only allows ‘break-word’ or ‘normal’ values is correct, and this is because word-wrap (now standardized as overflow-wrap) was never designed to disable wrapping entirely. Instead, it controls the behavior when text does overflow its container.

The word-wrap property:

• normal: Allows line breaks only at allowed break points (spaces, hyphens)
• break-word: Allows breaking words when there are no allowed break points

Neither value prevents wrapping; they only determine how wrapping occurs. This is a common misconception - many developers expect word-wrap to have a ‘none’ value, but this property was intentionally designed to always allow wrapping, just with different strategies.

The fundamental difference is that word-wrap/overflow-wrap is about how text wraps, while white-space is about whether text wraps at all.

Handling Text Overflow

When you disable word wrapping with white-space: nowrap, you inevitably face the question of what happens when the text exceeds the container width. There are several approaches to handle this overflow:

1. Hide Overflow

.no-wrap {
 white-space: nowrap;
 overflow: hidden;
}

This simply hides any text that extends beyond the container boundaries.

2. Show Ellipsis

.no-wrap {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

This is often the most user-friendly approach, adding “…” when text is truncated.

3. Scroll Container

.no-wrap {
 white-space: nowrap;
 overflow-x: auto;
}

This provides a horizontal scrollbar when text overflows.

4. Shrink Text

.no-wrap {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 min-width: 0;
 width: 100%;
}

This combination works particularly well for responsive layouts.

Modern Alternative: text-wrap: nowrap

For newer browsers, the CSS Text module introduces text-wrap with a nowrap value that serves as a modern alternative to white-space: nowrap:

.modern-no-wrap {
 text-wrap: nowrap;
}

This property is more semantically correct as it specifically targets text wrapping behavior rather than general white space handling. However, browser support is more limited than the traditional white-space property.

As of 2023, text-wrap: nowrap has good support in:

• Chrome 114+
• Firefox 120+
• Safari 16.6+
• Edge 114+

For maximum compatibility, especially with older browsers, white-space: nowrap remains the recommended approach. You could use both with feature detection:

@supports (text-wrap: nowrap) {
 .no-wrap {
 text-wrap: nowrap;
 }
}

@supports not (text-wrap: nowrap) {
 .no-wrap {
 white-space: nowrap;
 }
}

Complete Code Example

Here’s a comprehensive example showing how to implement text wrapping prevention with proper overflow handling:

<div class="no-wrap-container">
 <span class="no-wrap-ellipsis">This is some text that will not wrap and will show ellipsis when it overflows</span>
 <span class="no-wrap-scroll">This is some text that will not wrap but will scroll horizontally</span>
</div>

.no-wrap-container {
 font-family: Arial, sans-serif;
 margin: 20px;
}

.no-wrap-ellipsis {
 display: inline-block;
 width: 200px;
 padding: 8px;
 background-color: #f0f0f0;
 border: 1px solid #ddd;
 
 /* Prevent wrapping */
 white-space: nowrap;
 
 /* Handle overflow */
 overflow: hidden;
 text-overflow: ellipsis;
}

.no-wrap-scroll {
 display: inline-block;
 width: 200px;
 padding: 8px;
 background-color: #f0f0f0;
 border: 1px solid #ddd;
 
 /* Prevent wrapping */
 white-space: nowrap;
 
 /* Allow horizontal scrolling */
 overflow-x: auto;
}

This example demonstrates two common scenarios: truncating text with ellipsis and providing a scrollbar for overflow. Both solutions maintain the “no wrap” behavior while handling overflow appropriately.

Browser Compatibility

The white-space: nowrap property has excellent browser compatibility, working in all modern browsers and going back to Internet Explorer 5.5. This makes it the most reliable solution for preventing text wrapping across all browsers.

For production environments, especially those requiring support for older browsers, white-space: nowrap remains the recommended approach. The text-wrap property can be used as a progressive enhancement for newer browsers.

Remember that while the CSS properties themselves are well-supported, the visual behavior may vary slightly between browsers in terms of how overflow is handled and rendered.

Sources

1. MDN Web Docs — Comprehensive documentation on white-space property and its values: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
2. CSS-Tricks — Visual guide to white-space property and its various values: https://css-tricks.com/almanac/properties/w/white-space/
3. LogRocket Blog — Practical examples of text overflow handling techniques: https://blog.logrocket.com/css-text-overflow-ellipsis/
4. TutorialsPoint — Clear explanation of white-space property values and their effects: https://www.tutorialspoint.com/css/css_white-space.htm
5. Coder’s Block — Deep dive into text wrapping behavior in CSS: https://css-tricks.com/almanac/properties/w/word-wrap/
6. Stack Overflow — Community discussion on preventing text wrapping: https://stackoverflow.com/questions/1613674/how-to-disable-text-wrapping-in-html

Conclusion

To disable word wrapping in HTML, the definitive solution is using white-space: nowrap CSS property. This prevents text from wrapping to multiple lines regardless of container width. For better user experience when text overflows, combine it with overflow handling techniques like text-overflow: ellipsis or horizontal scrolling. While newer browsers support text-wrap: nowrap as a modern alternative, white-space: nowrap remains the most compatible solution across all browsers. Remember that word-wrap cannot disable wrapping - it only controls how wrapping occurs when text overflows.