Definition and Usage
The word-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
Note: Originally a Microsoft (unprefixed) proprietary extension, the word-wrap property has been renamed overflow-wrap in the current draft of the CSS3 Text specification. Stable builds of Google Chrome and Opera support the new syntax.
- Initialnormal
- Applies toall elements
- Inheritedyes
- Mediavisual
- Computed Valueas specified
- Animatableno
- Canonical orderthe unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: normal | break-word
word-wrap: normal word-wrap: break-word word-wrap: inherit
Values
- normal
- Indicates that lines may only break at normal word break points.
- break-word
- Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.
Examples
1 |
p { width: 13em; background: gold; } |
At vero eos et accusamus et iusto odio dignissimos ducimusquiblanditiispraesentiumvoluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident
1 |
p { width: 13em; background: gold; word-wrap: break-word; } |
At vero eos et accusamus et iusto odiodignissimosducimusquiblanditiispraesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident
Compatibility
Desktop browsers
| Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 3.5 (1.9.1) | 1.0 | 5.5 | 10.5 | 1.0 |
Mobile browsers
| Feature | Firefox Mobile (Gecko) | Android | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 1.0 (1.9.1) | 1.0 | NA | NA | 1.0 |