Wrapping long text in CSS

Mastering Text Wrapping in CSS: Techniques for Long Content

Explore various CSS properties like word-wrap, word-break, and overflow-wrap to effectively manage and wrap long strings of text, preventing layout issues and enhancing readability.

Long strings of text without spaces, such as URLs, file paths, or generated hashes, can notoriously break CSS layouts. When these elements exceed their container's width, they often overflow, causing horizontal scrollbars, obscured content, or a completely disrupted design. This article delves into the essential CSS properties designed to handle such situations, ensuring your layouts remain fluid and your content readable. We'll cover word-wrap, word-break, and overflow-wrap, along with practical examples and best practices.

Understanding word-wrap and overflow-wrap

Historically, word-wrap was the go-to property for breaking long words. However, word-wrap has been deprecated in favor of overflow-wrap. They function identically and overflow-wrap is now the standard. Both properties allow you to specify whether a long, unbroken string of text should break and wrap to the next line when it overflows its container. This is crucial for maintaining layout integrity without introducing unwanted scrollbars.

By default, text will only wrap at white spaces. When a single word is too long to fit, overflow-wrap: normal (the default) will cause it to overflow. Setting overflow-wrap: break-word instructs the browser to break the word at an arbitrary point if necessary, ensuring it stays within its container. This is particularly useful for content like long URLs or code snippets that don't naturally contain spaces.

.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.long-text {
  overflow-wrap: break-word; /* Prevents overflow by breaking long words */
}

Applying overflow-wrap: break-word to ensure text wraps within its container.

Controlling Breaks with word-break

While overflow-wrap handles breaking words that are too long, word-break offers more fine-grained control over how words break. It's especially useful for languages like Japanese, Chinese, and Korean where word boundaries are not always marked by spaces.

There are a few key values for word-break:

• normal: Default word breaking rules.
• break-all: Allows words to be broken at any character to prevent overflow. This is more aggressive than overflow-wrap: break-word as it will break any word, even if it could fit on the next line without breaking.
• keep-all: Prevents breaks between CJK (Chinese, Japanese, Korean) characters. Non-CJK text behaves like normal.
• break-word: This value is deprecated in CSS Text Level 3 and its functionality is largely covered by overflow-wrap: break-word. It's recommended to use overflow-wrap for this specific behavior.

.container {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
}

.aggressive-break {
  word-break: break-all; /* Breaks words at any character */
}

.cjk-example {
  word-break: keep-all; /* Prevents breaks in CJK text */
}

Examples of word-break values for different wrapping behaviors.

Combining Properties for Robust Wrapping

For the most robust text wrapping solution, it's often beneficial to combine overflow-wrap and word-break. A common pattern is to use overflow-wrap: break-word for general long word handling, and then word-break: break-word (for older browser compatibility, though overflow-wrap is preferred) or word-break: break-all if more aggressive breaking is required.

Consider the scenario where you have a long URL. overflow-wrap: break-word will break it if it overflows. If you also want to ensure that even short words within a very narrow container break, word-break: break-all can be used. However, overflow-wrap: break-word is usually sufficient for most English-like content.

.container {
  width: 150px;
  border: 1px solid #ccc;
  padding: 10px;
}

.combined-wrap {
  overflow-wrap: break-word; /* Standard for long words */
  word-break: break-all;    /* More aggressive, if needed */
  hyphens: auto;           /* Optional: for better readability with hyphens */
}

A combined CSS approach for comprehensive text wrapping.

Visualizing the impact of different text wrapping properties.

1. Step 1

Identify elements prone to long, unbroken text strings (e.g., URLs, code, hashes).

2. Step 2

Apply overflow-wrap: break-word; to these elements' containers to prevent basic overflow.

3. Step 3

If more aggressive breaking is needed (e.g., for very narrow containers or specific languages), consider adding word-break: break-all;.

4. Step 4

Optionally, add hyphens: auto; to improve readability by allowing automatic hyphenation at word breaks.

5. Step 5

Test your layout across different browser sizes and content lengths to ensure consistent behavior.