Differences between word-break work-wrap and wordwrapwordbreak

Differences between word-break work-wrap and wordwrapwordbreak

Word-break: [word breaking]

Definition: Define the handling method of automatic line feed. Note: Use word-break to enable the browser to wrap lines at any position.

Syntax: 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 default line feed rule of the browser.
Break-all	Line breaks are allowed in words.
Keep-all	You can only wrap a line at a halfwidth space or a hyphen.

 

 

 

 

Compatibility:

Example:

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

No word-break is set:

 

Set word-break: break-all;

 

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

 

Word-wrap: [line feed]

Definition: long words or URLs can be wrapped into 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	Wrap only at the allowed broken word points (the browser keeps processing by default ).
Break-word	Wrap a line in a long word or URL address.

 

 

 

Compatibility:

For example, [the same as above]

No word-wrap is set:

 

 

Set word-wrap: normal;

 

Set word-wrap: break-word;

 

Compare the difference between setting word-break: break-all; and word-wrap: break-word in the preceding example.

 

Summary:

Word-break

Break-all:Place it forcibly, and change the next line of display if you cannot squeeze the rest.

Keep-all: if it cannot be placed, another line is displayed. If it cannot be placed, the display overflows.

Word-wrap: When the end of a line cannot be placed, determines whether to allow line breaks in the word => how to wrap the line in the word

Normal: The word is too long, and the line feed is displayed. If more than one line is exceeded, the word is displayed.

Break-word:When the word is too long, try to wrap the line first; after the line feed is still too long, the word can also wrap.

 

 

Add one: the two ends of the text are aligned

Attribute: text-align: justify;

Compatibility: very bad

 

Text-align: center;

Text-align: justify;

 

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