A brief analysis of the difference between word-break work-wrap

word-break:【Word break】

Definition: Specifies the processing method of automatic line wrapping. Note: By using word-break, the browser can be used to wrap lines at any position.

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

Default value	normal
Inheritance	yes
Version	css3
Javascript syntax	object.style.wordBreak="keep-all"

Value	Description
normal	Use the browser's default line wrapping rules.
break-all	Allow line breaks within words.
keep-all	Can only wrap lines at half-width spaces or hyphens.

Compatibility:

Give me an example:

<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.

Grammar: word-wrap: normal|break-word;

Default value:	normal
Inheritance:	yes
Version:	CSS3
JavaScript syntax:	object.style.wordWrap="break-word"

Value	Description
normal	Only wrap lines at allowed hyphenation points (browsers keep default processing).
break-word	Wrap lines inside long words or URL addresses.

Compatibility:

For example: [Same as above]

word-wrap not set:

Set word-wrap:normal;

Set word-wrap:break-word;

Compare the difference between the above chestnut settings word-break:break-all; and word-wrap:break-word

Summary:

word-break: When a word cannot be placed at the end of a line, determine how to place the word inside => Determine whether the word will break into a new line when a word cannot be placed at the end of the sentence

Break-all: Forcibly placed, if the remaining items cannot be squeezed in, change to the next line for display.

keep-all: If it cannot fit, display it in another line; if it still cannot fit, it will display overflow.

word-wrap: When the end of the line cannot fit, decide whether to allow line wrapping within the word => Determine how to wrap the line within the word

Normal: The word is too long and will be displayed in a new line. If it exceeds one line, it will overflow.

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

Attach one: align text on both ends

Attribute: text-align:justify;

Compatibility: Very bad

text-align:center;

text-align:justify;

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