I volontari di MDN non hanno ancora tradotto questo articolo in Italiano. Unisciti a noi e traducilo tu stesso.
Puoi anche consultare l’articolo in English (US).

The overflow-wrap CSS property sets whether the browser should insert line breaks within words to prevent text from overflowing its content box.

Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias.

Syntax

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

The overflow-wrap property is specified as a single keyword chosen from the list of values below.

Values

normal
Lines may only break at normal word break points (such as a space between two words).
break-word
To prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

Formal syntax

normal | break-word

Example

This example compares the results of overflow-wrap, word-break, and hyphens when breaking up a long word.

HTML

<p class="normal">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (<code>normal</code>)</p>
<p class="overflow-wrap">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (<code>overflow-wrap</code>)</p>
<p class="word-break">They say the fishing is excellent at
  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
  though I've never been there myself. (<code>word-break</code>)</p> 
<p class="hyphens">They say the fishing is excellent at 
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg, 
though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p>
<p class="hyphens" lang="en">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (<code>hyphens</code>, English rules)</p>
<p class="hyphens" lang="de">They say the fishing is excellent at
Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
though I've never been there myself. (<code>hyphens</code>, German rules)</p>

CSS

p {
  width: 13em;
  background: gold;
}

.overflow-wrap {
  overflow-wrap: break-word;
}

.word-break {
  word-break: break-all;
}

.hyphens {
  hyphens: auto;
}

Result

Specifications

Specification Status Comment
CSS Text Module Level 3
The definition of 'overflow-wrap' in that specification.
Working Draft Initial definition

Initial valuenormal
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support Yes
Full support Yes
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Edge Full support 18
Full support 18
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Firefox Full support 49
Full support 49
Full support 3.5
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
IE Full support 5.5
Alternate Name
Full support 5.5
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Opera Full support Yes
Full support Yes
Full support 10.5
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Safari Full support Yes
Full support Yes
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
WebView Android Full support Yes
Full support Yes
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Chrome Android ? Edge Mobile Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Firefox Android Full support 49
Full support 49
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Opera Android Full support YesSafari iOS Full support Yes
Full support Yes
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: word-wrap
Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Uses a non-standard name.
Uses a non-standard name.

See also

Tag del documento e collaboratori

Ultima modifica di: ddbeck,