# CSS Text Wrapping Properties Guide

WARNING: This guide was written by an LLM and has not been fact-checked - it may include errors.

This guide demonstrates all CSS properties that control text wrapping behavior with examples and browser compatibility information. Text wrapping is how browsers handle the flow of text when it reaches the edge of its containing element.

## Word-wrap / overflow-wrap property

word-wrap (now also called overflow-wrap) specifies whether the browser should break long words when they overflow their container.

overflow-wrap: normal (default)
This is a regular sentence with the supercalifragilisticexpialidocioussupercalifragilisticexpialidocious word that will overflow its container when using normal wrapping.
Browser support: Excellent across all major browsers
overflow-wrap: break-word
This is a regular sentence with the supercalifragilisticexpialidocioussupercalifragilisticexpialidocious word that will break at arbitrary points to prevent overflow.
Browser support: Excellent across all major browsers
overflow-wrap: anywhere
This is a regular sentence with the supercalifragilisticexpialidocioussupercalifragilisticexpialidocious word that will break even between characters to optimize line filling.
Browser support: Good in modern browsers, IE not supported

Value | Description
--- | ---
normal | Words break only at allowed break points (like spaces or hyphens)
break-word | Words will break at arbitrary points if they're too long for their container
anywhere | Like break-word, but also creates soft wrap opportunities for better line filling

Note: word-wrap is the original property name and overflow-wrap is the modern standard name for the same property. For best compatibility, you can use both in your CSS.

## Word-break property

word-break specifies how word breaks should occur, particularly for non-western languages.

word-break: normal (default)
This is a regular sentence with the supercalifragilisticexpialidocioussupercalifragilisticexpialidocious word using normal breaking rules. Chinese text like 这是一些中文文本示例 follows language-specific rules.
Browser support: Excellent across all major browsers
word-break: break-all
This is a regular sentence with the supercalifragilisticexpialidocioussupercalifragilisticexpialidocious word that will break at any character. Even regular words break between any characters.
Browser support: Excellent across all major browsers
word-break: keep-all
This is a regular sentence with the supercalifragilisticexpialidocioussupercalifragilisticexpialidocious word. Chinese text like 这是一些中文文本示例 won't break between characters.
Browser support: Good in modern browsers, partial in older ones
word-break: break-word (deprecated)
This is a regular sentence with the supercalifragilisticexpialidocioussupercalifragilisticexpialidocious word showing similar behavior to overflow-wrap: break-word, but is now deprecated.
Browser support: Varies, deprecated in favor of overflow-wrap

Value | Description
--- | ---
normal | Default breaking rules for each language
break-all | Words break at any character to prevent overflow
keep-all | Prevents breaks for Chinese, Japanese, and Korean text
break-word | Deprecated, similar to overflow-wrap: break-word

Important: The word-break: break-word value is now deprecated and behaves similarly to overflow-wrap: break-word. Use overflow-wrap for better compatibility.

## White-space property

white-space controls how whitespace (spaces, tabs, newlines) is handled within an element.

white-space: normal (default)
This text has multiple spaces and line breaks, but they are collapsed into single spaces, and text wraps as needed.
Browser support: Excellent across all major browsers
white-space: nowrap
This text will appear in a single line no matter how long it is and won't wrap to the next line until a
tag or explicit line break is encountered.
Browser support: Excellent across all major browsers
white-space: pre
This text has multiple spaces and line breaks, and they are all preserved exactly as written. No wrapping occurs.
Browser support: Excellent across all major browsers
white-space: pre-wrap
This text has multiple spaces and line breaks, they are preserved, and text will also wrap at the end of lines when needed.
Browser support: Excellent across all major browsers
white-space: pre-line
This text has multiple spaces and line breaks, spaces are collapsed, but line breaks are preserved, and text wraps.
Browser support: Excellent across all major browsers
white-space: break-spaces
This text has multiple spaces and line breaks, like pre-wrap but spaces at the end of lines and between words won't collapse.
Browser support: Good in modern browsers, not in IE

Value | Whitespace collapse | Line breaks preserved | Text wrapping
--- | --- | --- | ---
normal | Yes | No | Yes
nowrap | Yes | No | No
pre | No | Yes | No
pre-wrap | No | Yes | Yes
pre-line | Yes | Yes | Yes
break-spaces | No | Yes | Yes, with preserved spaces

## Text-overflow property

text-overflow specifies how overflowed content is signaled to users. Note that this requires overflow: hidden and typically white-space: nowrap to work properly.

text-overflow: clip (default)
This is a very long text that will be clipped at the boundary of its container box without any special indicator.
Browser support: Excellent across all major browsers
text-overflow: ellipsis
This is a very long text that will be truncated with an ellipsis (…) indicating there is more content.
Browser support: Excellent across all major browsers
text-overflow: "→"
This is a very long text that will be truncated with a custom string (in this case an arrow) indicating more content.
Browser support: Limited, works in Firefox, not in Chrome or Safari

Value | Description
--- | ---
clip | Default. The text is clipped and not accessible
ellipsis | Renders an ellipsis ("…") to represent clipped text
string | Renders the given string to represent clipped text (limited support)

Note: For text-overflow to have any effect, the element must have overflow set to something other than visible, and the content must be constrained in the inline direction (typically by using white-space: nowrap).

## Hyphens property

hyphens controls how words break with hyphens when they reach the end of a line.

hyphens: none
This demonstration contains some extraordinarily long vocabulary specifically to showcase hyphenation demonstration capabilities of cascading style sheets.
Browser support: Good in modern browsers, requires prefixes in some
hyphens: auto
This demonstration contains some extraordinarily long vocabulary specifically to showcase hyphenation demonstration capabilities of cascading style sheets.
Browser support: Varies across browsers, requires lang attribute
hyphens: manual
This demonstration contains some extraordinarily long vocabulary specifically to showcase hyphenation demonstration capabilities.
Browser support: Good in most modern browsers

Value | Description
--- | ---
none | Words won't break at line ends, even if characters like hyphens suggest breakpoints
manual | Words only break at suggested break points (using &shy; or soft hyphens)
auto | Browser automatically determines hyphenation points based on language rules

Note: For hyphens: auto to work properly, the content must have a valid lang attribute set (e.g., lang="en"). Browser support and quality of automatic hyphenation varies.

## Line-break property

line-break specifies how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.

line-break: auto (default)
日本語の例文です。句読点や括弧などの記号も含まれています（例えば、これは括弧内のテキストです）。終わりに句点があります。
Browser support: Good in modern browsers, varies in older ones
line-break: loose
日本語の例文です。句読点や括弧などの記号も含まれています（例えば、これは括弧内のテキストです）。終わりに句点があります。
Browser support: Varies across browsers
line-break: normal
日本語の例文です。句読点や括弧などの記号も含まれています（例えば、これは括弧内のテキストです）。終わりに句点があります。
Browser support: Varies across browsers
line-break: strict
日本語の例文です。句読点や括弧などの記号も含まれています（例えば、これは括弧内のテキストです）。終わりに句点があります。
Browser support: Varies across browsers
line-break: anywhere
日本語の例文です。句読点や括弧などの記号も含まれています（例えば、これは括弧内のテキストです）。終わりに句点があります。
Browser support: Limited, newer property value

Value | Description
--- | ---
auto | Default - uses the default line breaking rules
loose | Relaxed line breaking rules, allows more breaks with CJK punctuation
normal | Standard line breaking rules
strict | Stricter line breaking rules, fewer breaks with CJK punctuation
anywhere | Breaks lines at any character

Note: The line-break property is primarily designed for CJK text and may have minimal effect on non-CJK text.

## Text-wrap property

text-wrap is a newer CSS property that allows for more control over text wrapping behavior.

text-wrap: wrap (default)
This is the default wrapping behavior where text wraps according to the available space in the container.
Browser support: New property, limited support
text-wrap: nowrap
This text will not wrap to the next line, similar to white-space: nowrap but specifically for wrapping behavior.
Browser support: New property, limited support
text-wrap: balance
This property attempts to balance the amount of text on each line for more visually pleasing line breaks, especially useful for headings.
Browser support: Very limited, Chrome and Firefox only
text-wrap: pretty
Similar to balance, but with less aggressive balancing. Aims to prevent single words on the last line (widows).
Browser support: Very limited, newest property value

Value | Description
--- | ---
wrap | Default wrapping behavior
nowrap | Prevents text from wrapping
balance | Attempts to balance the amount of text on each line
pretty | Less aggressive than balance, prevents single words on last line

Important: text-wrap is a newer CSS property with limited browser support. Always use fallbacks when implementing it in production.