Shulou(Shulou.com)06/03 Report--

This article is about the difference between word-break and work-wrap in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Word-break: [broken words]

Definition: specifies the processing method of automatic line wrapping. Note: through the use of word-break, it is possible to make browsers wrap lines anywhere.

Syntax: word-break: normal | break-all | keep-all

The default value of normal inherited yes version css3Javascript syntax object.style.wordBreak= "keep-all" describes that normal uses the browser's default line wrapping rules. Break-all allows line breaks within words. Keep-all can only wrap at half-width spaces or hyphens.

Compatibility:

Take a chestnut:

IIanis http://3iuiuskjfksjj.com/test_abjcljlj/?daydayupdadyda=dayayupupdaalurupsjlsjfljlsfjljljouwrouowurouorwurouurowurouwruwouour. Text-s {display: inline-block; width: 240px; / / word-break: keep-all;}

Word-break is not set:

Set up word-break:break-all

Set word-break:keep-all; or word-break:normal

Word-wrap: [line wrapping]

Definition: allows long words or URL addresses to wrap to the next line.

Syntax: word-wrap: normal | break-word

Default value: normal inheritance: yes version: CSS3JavaScript syntax:

Object.style.wordWrap= "break-word"

Value describes that normal only wraps lines at allowed hyphenation points (browsers keep default processing). Break-word wraps lines inside long words or URL addresses.

Compatibility:

Take a chestnut: [same as above]

Word-wrap is not set:

Set up word-wrap:normal

Set up word-wrap:break-word

Compare the above differences in setting word-break:break-all; and word-wrap:break-word for chestnuts.

Summary:

Word-break: when you can't put a word at the end of a line, decide how to put it inside the word = > decide whether the word wraps when it doesn't fit at the end of the sentence.

Break-all: put it forcefully, and if you can't squeeze the rest, change the display line to the next line.

Keep-all: if you can't put it down, start another line to show it; if you can't put it down, it will overflow.

Word-wrap: when the end of a line does not fit, decide whether a line break is allowed within a word = > decide how to do it.

Normal: if the word is too long, it will be displayed on a new line or overflow on more than one line.

Break-word: when the word is too long, try to break the line first; after the line break is still too long, you can also break the line inside the word.

Add one: align the two ends of the text

Attribute: text-align:justify

Compatibility: very bad

Text-align:center

Text-align:justify

Thank you for reading! This is the end of the article on "what's the difference between word-break and work-wrap in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.