Analysis on the difference between Word-break Work-wrap

Word-break: "Word breaker"

Definition: A method for handling automatic line wrapping. Note: By using Word-break, you can enable the browser to wrap anywhere.

syntax: word-break:normal|break-all|keep-all;

Default value	Normal
Inheritance of	Yes
Version	Css3
JavaScript syntax	object.style.wordbreak= "Keep-all"

value	Description
Normal	Use the browser's default line-wrapping rule.
Break-all	Allows line wrapping within a word.
Keep-all	You can only wrap at half-width spaces or hyphens.

Compatibility:

Give me a chestnut:

<span class= "Text-s" >iianishttp://3iuiuskjfksjj.com/test_abjcljlj/?daydayupdadyda= dayayupupdaalurupsjlsjfljlsfjljljouwrouowurouorwurouurowurouwruwouour</span>.text-s {    display: Inline-block;    width:240px;    Word-break:keep-all;}

Word-break Not set:

Set Word-break:break-all;

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

Word-wrap: "Line Break"

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

Syntax: Word-wrap:normal|break-word;

Default value:	Normal
Inheritance:	Yes
Version:	CSS3
JavaScript Syntax:	object. style.wordwrap= "Break-word"

value	Description
Normal	Line breaks only on allowed hyphenation points (the browser keeps the default processing).
Break-word	Wraps a line inside a long word or URL address.

Compatibility:

Give me a chestnut: "Same as above"

Word-wrap Not set:

Set Word-wrap:normal;

Set Word-wrap:break-word;

Contrast the above chestnut set word-break:break-all; and Word-wrap:break-word the difference

Summarize:

Word-break: When a word is not placed at the end of a line, decide how to place the word inside and decide whether the word will be wrapped in the end of the sentence.

Break-all: forcibly placed, squeeze the rest will be replaced by a line display.

Keep-all: Not fit, on the other line to display, if not enough to overflow display.

Word-wrap: When the end of the line does not fit, decide whether to allow line break in the word and to decide how to break in the word.

Normal: The word is too long, line-break display, overflow display in more than one line.

Break-word: When the word is too long, try wrapping it first, or it will be too long after the line is wrapped, and the word can be wrapped in words .

Attach One: Text justified

Property: Text-align:justify;

Compatibility: Very Bad

Text-align:center;

text-align:justify;

Reference post: http://www.alloyteam.com/2016/05/css-word-for-word-breaker-do-you-really-understand/

Analysis on the difference between Word-break Work-wrap