CSS to force long text and urls to wrap on all browser

Overview

By default, browsers do not wrap long continuous strings (like long URLs or very long words) if they exceed the container's width. This can break your layout, cause horizontal scrolling, or push content outside its box. In this lesson, you'll learn how to force such text to wrap properly across all modern browsers using CSS.

The Problem

When a word or a URL is longer than the available width, browsers typically try to break at hyphens or spaces. If none exist, the content overflows. For example:

The Solution: word-wrap / overflow-wrap

The most reliable way to force wrapping is to use the overflow-wrap property (formerly word-wrap). This property tells the browser whether to break words when they overflow the container.

The break-word value forces the browser to break a word at any character if it would otherwise overflow.

Additional Properties for Robust Wrapping

For maximum compatibility across all browsers, combine overflow-wrap with word-break and hyphens:

• word-break: break-word; – older browsers may need this as a fallback.
• hyphens: auto; – enables hyphenation at syllable boundaries (improves readability).

Browser Support

• overflow-wrap is supported in all modern browsers (Chrome, Firefox, Safari, Edge, Opera) and Internet Explorer 10+.
• word-break: break-word works in all modern browsers as well.
• For older browsers (IE 8/9), you can use word-wrap: break-word (the older syntax) – it is still recognized.

Practical Example: Long URLs in a Container

Consider a comment section where users might paste long links. Applying the wrapping classes ensures the layout stays clean.

When to Use Which

• Long URLs / user-generated text: Always use overflow-wrap: break-word to prevent overflow.
• Code blocks / preformatted text: You may also need white-space: pre-wrap to preserve formatting while wrapping.
• Tables and grids: Use table-layout: fixed combined with wrapping to keep columns from expanding.

Common Mistakes

• Using word-break: break-all indiscriminately: This breaks words even when there's no overflow, which can make text harder to read. Prefer break-word (which only breaks when necessary).
• Forgetting to set a container width: Wrapping only works when the container has a defined width or max-width.
• Not testing in multiple browsers: Always test the wrapping behaviour in Chrome, Firefox, and Safari to ensure consistency.

Summary

To force long text and URLs to wrap on all browsers, use overflow-wrap: break-word combined with word-break: break-word for a robust solution. This approach works across all modern browsers and provides a clean fallback for older versions. Remember to set a width on the container and test your pages to ensure a consistent user experience.