Thoroughly understand word-break, word-wrap, and white-space

White-space, word-break and word-wrap (overflow-wrap) are the most basic and confusing attributes in CSS. Many people confuse them or use them incorrectly. Must be organized systematically, today we will make these three attributes thoroughly clear!

The test code

(The code for all the examples in this article is at the end of the article.) Here is the HTML code used in this article to test the presentation of the three style attributes:

<div id="box"> Hi&nbsp; &nbsp; < BR > This is an incomprehensibilities long word. &nbsp; This is an incredibly long word </div>Copy the code

Now it’s given a width and border and nothing else, and here’s what it looks like:



As you can see,nbsp;and<br>This works fine, but consecutive Spaces are reduced to one (for example, three Spaces between This and is become one), and newlines are invalidated. Sentences that are longer than one line wrap themselves, and individual words that are longer than one line go out of bounds.

Let’s take a look at what happens when we assign the three CSS properties above it.

white-space

As its name suggests, this property controls the display of whitespace characters, as well as whether or not to wrap. It has five values: normal | nowrap | pre | pre – wrap | pre – line. Since the default is normal, we’ll focus on the presentation of the other four values.

(For the convenience of comparison, in all the graphs below, the left side is normal, i.e. the initial condition, and the right side is when the corresponding value is assigned)

Let’s take a look at white-space: Nowrap:

Not only are Spaces merged, but newlines are invalid, and the original wrap is gone! Only

can cause a line break! So this value is pretty simple, we can think of it as never wrapping.

White – space: the pre:

Spaces and newlines are all preserved! But the auto-wrap is still gone. Preserve, so pre actually stands for preserve, just so it’s easy to remember.

White – space: the pre – wrap:

Prewrap prewrap prewrap prewrap prewrap prewrap prewrap prewrap prewrap prewrap prewrap prewrap prewrap prewrap prewrap

White – space: the pre – line:

Spaces have been merged, but the newline character will do the trick. The pre-line preserves’ ‘new line+wrap “.

I’ve compiled a list to sum it up:

word-break

As you can tell from the name, this property controls how words are split to wrap. It has three values: normal | break – all | keep – all.

Word – break: keep all: –

All “words” are not split into line breaks. Note that my “words” here include consecutive Chinese characters (Japanese, Korean, etc.) or can be interpreted as only Spaces that trigger line breaks

Word – break: break – all:

All words are split and line-break when they reach boundaries. No matter they are incomprehensibilities or short words such as long, they are forced to be split and line-break when they reach boundaries. So be careful with word-break:break-all.

It doesn’t seem to be a good effect. Could you put other words together as their incomprehensibilities? This requires the following attribute:

Word – wrap (overflow – wrap)

Also called overflow-wrap:

The word-wrap property was originally a private property of Microsoft, and has been renamed overflow-wrap in the current draft text specification of CSS3. Word-wrap is now an “alias” for overflow-wrap. Stable versions of Google’s Chrome and Opera browsers support the new syntax.

This property is also control how words are split line, is actually complementary as word – break, it has only two values: normal | break – word, then we look at the break – word:

Finally, we achieved the desired effect above, only when a word is not displayed in the entire line, the word will be broken. So I think overflow-wrap is easier to understand and remember. Overflow, only words that are long enough to overflow are forced to split and wrap!

Word-wrap :break-word; word-wrap:break-word; word-wrap:break-word;

conclusion

Finally, three properties are summarized

• White space,Controls the display of whitespace characters, and can also control whether to wrap. It has five values:normal | nowrap | pre | pre-wrap | pre-line
• Word – break,Controls how words are split and newlines. It has three values:normal | break-all | keep-all
• Word – wrap (overflow – wrap)Controls whether words longer than one line are split to wrap, it isword-breakIt has two values:normal | break-word

After reading this article, you should have a systematic understanding of white-space, word-break and word-wrap. If you still can’t remember it in a short time, please bookmark XD. If you like this article, I hope you can give a thumbs-up

Below is the code address for all the examples in this article, with each attribute as an option for easy learning