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 (now also called overflow-wrap) specifies whether the browser should break long words when they overflow their container.
| 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 specifies how word breaks should occur, particularly for non-western languages.
| 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 controls how whitespace (spaces, tabs, newlines) is handled within an element.
| 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 specifies how overflowed content is signaled to users. Note that this requires overflow: hidden and typically white-space: nowrap to work properly.
| 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 controls how words break with hyphens when they reach the end of a line.
| 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 ­ 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 specifies how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.
| 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 is a newer CSS property that allows for more control over text wrapping behavior.
| 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.