Analysis on the difference between Word-break Work-wrap

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.