• Home   /  
  • Archive by category "1"

Change Bibliography Style Word-Wrap

The CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Note: In contrast to , 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 , and was implemented by most browsers with the same name. It has since been renamed to , with 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 property is specified as a single keyword chosen from the list of values below.

Values

Lines may only break at normal word break points (such as a space between two words).
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

Examples

HTML

<p class="normal">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p> <p class="break-word">FStrPrivFinÄndG (Gesetz zur Änderung des Fernstraßenbauprivatfinanzierungsgesetzes und straßenverkehrsrechtlicher Vorschriften)</p>

CSS

.normal { width: 13em; background: gold; } .break-word { width: 13em; background: lime; overflow-wrap: break-word; }

Result

Specifications

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

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

Yes

11

No

Yes1

49

3.51

5.51

Yes

10.51

Yes

11

FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support

Yes

11

?

No

Yes1

49

41

Yes

Yes

11

?

1. Supported as .

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportFull support Yes
Full support Yes
Full support 1

Alternate Name

Alternate Name Uses the non-standard name:
No support No
No support No
Full support Yes

Alternate Name

Alternate Name Uses the non-standard name:
Full support 49
Full support 49
Full support 3.5

Alternate Name

Alternate Name Uses the non-standard name:
Full support 5.5

Alternate Name

Full support 5.5

Alternate Name

Alternate Name Uses the non-standard name:
Full support Yes
Full support Yes
Full support 10.5

Alternate Name

Alternate Name Uses the non-standard name:
Full support Yes
Full support Yes
Full support 1

Alternate Name

Alternate Name Uses the non-standard name:
Full support Yes
Full support Yes
Full support 1

Alternate Name

Alternate Name Uses the non-standard name:
? No support No
No support No
Full support Yes

Alternate Name

Alternate Name Uses the non-standard name:
Full support 49
Full support 49
Full support 4

Alternate Name

Alternate Name Uses the non-standard name:
Full support YesFull support Yes
Full support Yes
Full support 1

Alternate Name

Alternate Name Uses the non-standard name:
?

Legend

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

See also

Document Tags and Contributors

 Contributors to this page:wbamberg, fscholz, mfluehr, hannamocha, davidjb, arronei, xrtariq2594, erikadoyle, PhiLho, krixian, teoli, Thibaut, cvrebert, Sebastianz, jsx, paddingme, Chealer, LouisLazaris, Nickolay, kscarfone, Sheppy, mattbrundage, ethertank, FredB, dynamis, mkato, Jürgen Jeka, Michael Ryan

 Last updated by:wbamberg,

Sets the mode of text wrapping.

sWrap

String that specifies one of the following values:

normal

Default. Content exceeds the boundaries of its container.

break-word

Content wraps to next line, and a word-break occurs when necessary.

This property has a default value of normal. It is inherited.

This differs from the white-space property, which turns wrapping of the text on and off. The word-wrap property addresses only whether wrapping is permitted to occur at a place in the word that is not otherwise allowed by the language rules in effect.

This property applies to elements that have layout. An element has layout when it is absolutely positioned, is a block element, or is an inline element with a specified height or width.

The word "blonde" cannot be wrapped under typical English rules. But, when word-wrap is set to break-word, the word "blonde" can be split onto two lines in any way the browser chooses: such as "b" and "londe", or "blo" and "nde".

The following example shows how to use the break-word value of the word-wrap property to break one long word onto multiple lines. This value avoids horizontal scrolling and can be useful for printing. The p element in this example has layout, because its width is set.

<p style="word-wrap:break-word;width:100%;left:0"> LongWordLongWord...LongWordLongWord</p>

a, address, b, big, blockquote, body, button, caption, center, cite, code, col, colgroup, custom, dd, defaults, dfn, div, dl, dt, em, fieldset, form, hn, html, i, img, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, li, ol, p, s, span, sub, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var, xmp

One thought on “Change Bibliography Style Word-Wrap

Leave a comment

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *