Examples of differences 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://www.php.cn/;/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;

The above analysis of the Word-break work-wrap difference is small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support topic.alibabacloud.com.