What exactly does word-wrap and word-break mean?

What exactly are Word-wrap and word-break? Why do you have to repeat this problem? Is the question a problem?

We often need to "fix" a cliché "bug", which is the text of the automatic line wrapping problem. In professional terms, this expected rendering is called "word wrap", which means that the text processor is capable of automatically uploading the entire word beyond the page to the next line.

In real-world projects, especially in the testing phase, given that tests use very extreme test cases, we often need to "fix" the problem as shown in the picture:

Long Word Overflow

In the picture, the very long English word (although it is sporogenous) to ensure the full display, helplessly beyond the limit of the container, it overflowed. In order to "fix" This "problem", so that both East and West European text can be confined to the size of the container, we will generally add such as "Word-wrap:break-word;" Word-break:break-all; " The result of such a property that satisfies us (well, actually satisfying the test) is as shown in the figure:

Long words are forced to break

From a result-oriented perspective, the bug was "fixed", but after 35 such repetitions, I began to question the following:

1. What exactly are Word-wrap and word-break?
2. Why do you have to repeat this problem?
3. Is the question a problem?

rules

Before we can dispel doubts, there are several objective realities that concern the nature of the problem that need to be pointed out, because these "common sense" are most easily overlooked:

CJK text and! CJK text has its own typesetting rules.

Here, CJK represents Chinese, Japanese, and Korean, the East Asian text! CJK is non-East Asian text, most of which is Western European text.

In the text rendering rules, the two are very different, CJK text, a letter is a WORD element (word), independent of righteousness,! In CJK text, some letters form a WORD element, and the characters are delimited by a connector "-" or by a space "".

• More on the typesetting rules of CJK text, the more representative is that for Chinese, punctuation marks cannot be the beginning of the line (except for special); The punctuation mark (ellipsis, dash) of double word length cannot be disconnected.
• For! CJK, mainly: words cannot be legally disconnected in the middle (for example, disconnect from the connector); punctuation can not be the beginning of a line (special except)

FAQ One

What exactly are Word-wrap and word-break? For this question, visit the official website directly, find CSS3 draft:http://www.w3.org/TR/2010/WD-css3-text-20101005/, visit Microsoft again, draw lessons from such as http:// Msdn.microsoft.com/en-us/library/ms531184%28vs.85%29.aspx

The following conclusions are drawn:

Word-wrap, Line-break, word-break These attributes are all independent implementations of MS, and then other browsers have implemented some of them to varying degrees, after which these attributes have been incorporated into the CSS3 standard. In the rendering of text typesetting, Microsoft is still in the front.

In the present draft of CSS3, several important attributes of the text typesetting are: White-space, Text-wrap, Word-wrap, Line-break, Word-break

According to CSS3 's description, list the main points of these attributes, which readers can skip ...

• White-space is the abbreviation for white-space-collapsing and Text-wrap.

Property	Set up white-space-collapsing	Set up Text-wrap	Blank Line	Space	Text Wrap	Effect
Normal	Collapse	Normal	Collapse	Collapse	Wrap	Ignore extra blank lines and spaces, text wrap
Pre	Preserve	None	Preserve	Preserve	No wrap	Keep all blank lines and blanks, text does not automatically wrap
NoWrap	Collapse	None	Collapse	Collapse	No wrap	Ignore extra blank lines and spaces, text does not wrap automatically
Pre-wrap	Preserve	Normal	Preserve	Preserve	Wrap	Keep all blank lines and blanks, text wrap
Pre-line	Preserve-breaks	Normal	Preserve	Collapse	Wrap	Combine extra spaces, keep extra blank lines, text wrap

• Text-wrap defines the text's wrapping effect

Property	Effect
Normal	Wrap lines at allowed breakpoints
None	Text does not wrap automatically, and text will overflow for containers that do not fit.
Unrestricted	You can break through any grammatical word, which is much looser than the normal limit.
Suppress	Breaks can be broken unless there are any other allowed breakpoints at the break, which is more stringent than unrestricted and loosely compared to normal.

• Word-wrap performs the most aggressive word break control, breaking from the inside of the word to prevent text from spilling over the container and fully adapting to the width of the container
• In the actual effect of IE, the effect of word-break is much more radical, it breaks all words in an atrocious way (if the boundary is reached)

Property	Effect
Normal	Wrap only at allowed text breakpoints
Break-word	If there are no more acceptable breakpoints in a row, the text word will be forcibly disconnected

• Line-break is the rule for breaking lines, for East Asian text
• Basically a line break rule for Japanese
• Word-break is the rule for breaking lines, for non-east Asian text

Property	Effect
Normal	Decide whether to break automatically according to your own rules for a specific non-East Asian text
Break-all	Allows any word in a non-East Asian text line to be disconnected. This value is appropriate for East Asian text containing some non-east Asian text
Keep-all	Do not allow breaking within any word in a non-East Asian text line. This value is appropriate for non-East Asian text that contains some East Asian text
Hyphenation	The text will be disconnected at the appropriate hyphen, which requires support from the browser

Make a generalization: the attributes that are specifically used to control the text-wrapping function are text-wrap and word-wrap, while Line-break and Word-break are used to control line breaks and word boundaries, according to the description of the World Trade Bank, Word-wrap Is the most radical word wrapping, you can forcibly disconnect words. And the reality is, Word-break:break-all; The way to be more radical, as pictured:

Word-wrap

Word-break

Contrast Word-wrap:break-word; And Word-break:break-all, both of which limit the text to the scope of the container, except that break-all all words, regardless of their length, are truncated, Break-word is not so, it is as far as possible to comply with the typesetting rules.

compatibility

Since several attributes are from Microsoft (partly from CSS3), it is natural that IE is the best supported, but for floating elements, the performance of IE67 can be a bit of a bug (validated in the demo shown later in this article).

As for other browsers, FF 3.6 does not support Word-break;chrome 7 support well; Safari 5 Chrome;opera 10 with FF

FAQ two or three

There are two scenarios in which the related problems are encountered:

1. Tests use extreme test cases (such as ASDFASDFASDFASDFASDFASDFASDF)
2. IE67, a floating element is used in a container with a small width, while a floating element contains a long string, as shown in the figure:

IE67 in floating box cups

For scene one, use Word-wrap:break-word;

For scenario two, use the IE67 hack,word-break:keep-all; Or use Inline-block to replace the float (IE67, haslayout inline box is roughly equivalent to Inline-block)

Looking back at question two, why are we so happy to repeat this problem? In principle, the default text layout of each browser has been well taken into account CJK text and! CJK text, according to the language of their own rules to render typesetting, should not appear strange problems. So, for the two problem scenarios above, the scene one is created, because the use of extreme test cases, but in reality, this very long English words are non-existent (except for special industries), and even if the English word is longer, it should not be abrupt truncation, which violates the rules of the composition of Western European text. So I think that if the problem occurs in the real world, the responsibility lies in the layout design, such as the container width is too small, rather than to truncate the text; for scenario two, you should blame IE67 for rendering bugs, then use Inline-block instead, or use Word-break: Keep-all; To wipe your butt on the wrong browser.

Practice Program

• For the content of our output (controllable), do not use any word-wrap and Word-break properties, for possible long word overflow this small probability event, first consider the container width is reasonable, followed by a long word can add hyphens "-" to reasonably disconnect, finally set Overflow:hidden; Avoid visual spills.
• For the user output content (not controllable), such as comments, as not to exclude users will be input "dddddddddddd" such as the garbage data, the use of Word-wrap:break-word; To force truncation.

last point of view

• The test case cannot be fully indulged because it is sometimes impractical.
• Browser defaults have been done well enough to impose such a break-all; Such instructions are not elegant.
• Most of the problems are not implementation, but design (e.g., containers are too narrow).
• It is their fault to use hack for the bug browser.