Html div wrap lines

overflow-wrap

The overflow-wrap CSS property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.

Try it

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; overflow-wrap: anywhere; /* Global values */ overflow-wrap: inherit; overflow-wrap: initial; overflow-wrap: revert; overflow-wrap: revert-layer; overflow-wrap: unset; 

The overflow-wrap 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, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.

The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.

Formal definition

Formal syntax

Examples

Comparing overflow-wrap, word-break, and hyphens

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

HTML

p> They say the fishing is excellent at Lake em class="normal">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>normalcode>) p> p> They say the fishing is excellent at Lake em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>overflow-wrap: anywherecode>) p> p> They say the fishing is excellent at Lake em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>overflow-wrap: break-wordcode>) p> p> They say the fishing is excellent at Lake em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>word-breakcode>) p> p> They say the fishing is excellent at Lake em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>hyphenscode>, without code>langcode> attribute) p> p lang="en"> They say the fishing is excellent at Lake em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>hyphenscode>, English rules) p> p class="hyphens" lang="de"> They say the fishing is excellent at Lake em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I've never been there myself. (code>hyphenscode>, German rules) p> 

CSS

p  width: 13em; margin: 2px; background: gold; > .ow-anywhere  overflow-wrap: anywhere; > .ow-break-word  overflow-wrap: break-word; > .word-break  word-break: break-all; > .hyphens  hyphens: auto; > 

Result

Specifications

Источник

flex-wrap

Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

Try it

See Using CSS flexible boxes for more properties and information.

Syntax

flex-wrap: nowrap; /* Default value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* Global values */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: revert; flex-wrap: revert-layer; flex-wrap: unset; 

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

Values

The following values are accepted:

The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is either equivalent to start or before depending on the flex-direction value. This is the default value.

The flex items break into multiple lines. The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start.

Behaves the same as wrap but cross-start and cross-end are permuted.

Formal definition

Formal syntax

Examples

Setting flex container wrap values

HTML

h4>This is an example for flex-wrap:wraph4> div class="content"> div class="red">1div> div class="green">2div> div class="blue">3div> div> h4>This is an example for flex-wrap:nowraph4> div class="content1"> div class="red">1div> div class="green">2div> div class="blue">3div> div> h4>This is an example for flex-wrap:wrap-reverseh4> div class="content2"> div class="red">1div> div class="green">2div> div class="blue">3div> div> 

CSS

/* Common Styles */ .content, .content1, .content2  color: #fff; font: 100 24px/100px sans-serif; height: 150px; width: 897px; text-align: center; > .content div, .content1 div, .content2 div  height: 50%; width: 300px; > .red  background: orangered; > .green  background: yellowgreen; > .blue  background: steelblue; > /* Flexbox Styles */ .content  display: flex; flex-wrap: wrap; > .content1  display: flex; flex-wrap: nowrap; > .content2  display: flex; flex-wrap: wrap-reverse; > 

Results

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 17, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

overflow-wrap

The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.

overflow-wrap = normal | break-word | anywhere 

• Initial value: normal
• Applies to: non-replaced inline elements
• Inherited: yes
• Computed value: as specified
• Animation type: discrete

• normal : the default. The browser will break lines according to normal line breaking rules. Words or unbroken strings will not break, even if they overflow the container.
• break-word : words or strings of characters that are too large to fit inside their container will break in an arbitrary place to force a line break. A hyphen character will not be inserted, even if the hyphens property is used.
• inherit : the targeted element must inherit the value of the overflow-wrap property defined on its immediate parent.

The demo below has a toggle button that allows you to switch between normal and break-word .

To demonstrate the problem that overflow-wrap attempts to solve, the demo uses an unusually long word inside a relatively small container. When you toggle break-word on, the word is broken to accommodate the small amount of space available, as if the word were multiple words.

A string of non-breaking space characters ( ) would be treated the same way and would also break at an appropriate spot.

overflow-wrap is useful when applied to elements that contain unmoderated user-generated content (like comments sections). This can prevent long URLs and other unbroken strings of text (e.g. vandalism) from breaking a web page’s layout.

Similarities to the word-break property

overflow-wrap and word-break behave very similarly and can be used to solve similar problems. A basic summary of the difference, as explained in the CSS specification is:

• overflow-wrap is generally used to avoid problems with long strings causing broken layouts due to text flowing outside a container.
• word-break specifies soft wrap opportunities between letters commonly associated with languages like Chinese, Japanese, and Korean (CJK).

After describing examples of how word-break can be used in CJK content, the spec says: “To enable additional break opportunities only in the case of overflow, see overflow-wrap “.

From this, we can surmise that word-break is best used with non-English content that requires specific word-breaking rules, and that might be interspersed with English content, while overflow-wrap should be used to avoid broken layouts due to long strings, regardless of the language used.

The historical word-wrap property

overflow-wrap is the standard name for its predecessor, the word-wrap property. word-wrap was originally a proprietary Internet Explorer-only feature that was eventually supported in all browsers despite not being a standard.

word-wrap accepts the same values as overflow-wrap and behaves the same way. According to the spec, browsers “must treat word-wrap as an alternate name for the overflow-wrap property, as if it were a shorthand of overflow-wrap “. Also, all user agents are required to support word-wrap indefinitely, for legacy reasons.

Both overflow-wrap and word-wrap will pass CSS validation as long as the validator is set to test against CSS3 or higher (currently the default).

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

Источник

How to Wrap Words in a Tag with CSS

There are many CSS properties that can be used to control the wrapping and breakpoints and determine how spaces and line breaks must be processed before wrapping.

If you’ve faced the situation when you need to wrap words in a , you can use the white-space property with the «pre-wrap» value to preserve whitespace by the browser and wrap the text when necessary and on line breaks. Also, you’ll need the word-wrap property.

In this snippet, see how to use the properties mentioned above to wrap words in a with a cross-browser method.

Create HTML

html> html> head> title>Title of the document title> head> body> h1>Example h1> div> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. div> body> html>

Add CSS

• Set the white-space property to «pre-wrap». Also, add the -moz- and -o- prefixes.
• Use the word-wrap property with the «break-word» value.

div < white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; >

The result of our code looks like the following.

Example of wrapping words in a element:

html> html> head> title>Title of the document title> style> div < white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; color: lightgreen; > style> head> body> h1>Example h1> div> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. div> body> html>

Result

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero’s De Finibus Bonorum et Malorum for use in a type specimen book.

Let’s see another example, where we use the CSS overflow-wrap property, which applies to inline elements. It determines whether the browser must add line breaks within an otherwise unbreakable string for preventing the text from overflowing its line box.

In the example below, we wrap not only the word within a element but also the word, which is placed in a within the element.

Example of wrapping words in a element with the CSS word-wrap property:

html> html> head> title>Title of the document title> style> div < width: 100px; border: 1px solid green; padding: 10px; word-wrap: break-word; > span < overflow-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; > style> head> body> h1>Example h1> div> This is a span>loooooooooooooooooooooooooong span> text for example. Here can be a long word, tooooooooooooooo. div> body> html>

Источник