What is the difference between word-break and work-wrap in css
This article is about the difference between word-break and work-wrap in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
Word-break: [broken words]
Definition: specifies the processing method of automatic line wrapping. Note: through the use of word-break, it is possible to make browsers wrap lines anywhere.
Syntax: word-break: normal | break-all | keep-all
The default value of normal inherited yes version css3Javascript syntax object.style.wordBreak= "keep-all" describes that normal uses the browser's default line wrapping rules. Break-all allows line breaks within words. Keep-all can only wrap at half-width spaces or hyphens.
Compatibility:
Take a chestnut:
IIanis http://3iuiuskjfksjj.com/test_abjcljlj/?daydayupdadyda=dayayupupdaalurupsjlsjfljlsfjljljouwrouowurouorwurouurowurouwruwouour. Text-s {display: inline-block; width: 240px; / / word-break: keep-all;}
Word-break is not set:
Set up word-break:break-all
Set word-break:keep-all; or word-break:normal
Word-wrap: [line wrapping]
Definition: allows long words or URL addresses to wrap to the next line.
Syntax: word-wrap: normal | break-word
Default value: normal inheritance: yes version: CSS3JavaScript syntax:
Object.style.wordWrap= "break-word"
Value describes that normal only wraps lines at allowed hyphenation points (browsers keep default processing). Break-word wraps lines inside long words or URL addresses.
Compatibility:
Take a chestnut: [same as above]
Word-wrap is not set:
Set up word-wrap:normal
Set up word-wrap:break-word
Compare the above differences in setting word-break:break-all; and word-wrap:break-word for chestnuts.
Summary:
Word-break: when you can't put a word at the end of a line, decide how to put it inside the word = > decide whether the word wraps when it doesn't fit at the end of the sentence.
Break-all: put it forcefully, and if you can't squeeze the rest, change the display line to the next line.
Keep-all: if you can't put it down, start another line to show it; if you can't put it down, it will overflow.
Word-wrap: when the end of a line does not fit, decide whether a line break is allowed within a word = > decide how to do it.
Normal: if the word is too long, it will be displayed on a new line or overflow on more than one line.
Break-word: when the word is too long, try to break the line first; after the line break is still too long, you can also break the line inside the word.
Add one: align the two ends of the text
Attribute: text-align:justify
Compatibility: very bad
Text-align:center
Text-align:justify
Thank you for reading! This is the end of the article on "what's the difference between word-break and work-wrap in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
