Text wrapping Word-wrap, word-break, and White-space

This document is synchronized to the public number: http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401671055&idx=1&sn= B88c986e61708da0027fac035ad36f0f#rd

For subsequent articles interested in can add attention:

In some parts of the text is not displayed, see the whole content, please click on the original link above

When the content of the page is formatted, it is unavoidable to encounter the problem of processing the text. Today, the text wraps up the relevant content, recorded to share. After all, good memory is better than bad writing.

For text wrapping, you have previously dealt with related issues. Know that you want to use related style rules such as Word-wrap,word-break and White-space. However, it is unclear what the difference is between the three of them. Based on the principle of combining theory with practice and seeking truth from facts, I took time to look at it today.

Search Word-wrap on the Mozilla official website will be explained as follows:

word-wrap The property was used to specify whether or not the browser could break lines within words in order to prevent Overflow when a otherwise unbreakable string is too long to fit in its containing box.

Word-break 's explanation:

The word-break CSS property was used to specify whether to break lines within words.

The Word-wrap property is used to indicate whether the browser is allowed to segment within a word, in order to prevent the overflow of the inclusion box when a string is too long to find its natural segmentation point.

Word-break shows how to do the segmentation within a word.

In the literal sense that these two are used to wrap text, then what is the difference between the two? Let's take a look at the example given on the official website.

First look at the syntax of Word-wrap:

word-wrap: normal;word-wrap: break-word;

p { width: 13em; background: gold; }

When you specify Word-wrap:normal (the default), we see that the Fernstraßenbauprivatfinanzierungsgesetzesund word is long after the position of the DES is not displayed, it will be displayed in a different line, And it's spilling out of its container.

p { width: 13em; background: gold; word-wrap: break-word; }

When we add style Word-wrap:break-word to P elements, we run the results such as:

We see Fernstraßenbauprivatfinanzierungsgesetzesund so a long string will still be changed to the next line of display, the current row width is still not enough to display, he will be a line display. Break-word's explanation for the official web site is indicates that normally unbreakable words could be broken at arbitrary points if there is no otherwise a Cceptable break points in the line. The personal understanding is that, for normal text, it can be truncated in any place (newline display) when the remaining space in the container is not sufficient to display.

Next look at the example of Word-break given on the official website:

Syntax for Word-break:

word-break: normal; 
word-break: break-all; 
word-break: keep-all;

Take a look at the following three examples:

.narrow {    padding: 5px;    border: 1px solid;    width: 8em;}

<p>1.<code>word-break:normal</code> </p><p class< Span class= "token attr-value" >= "normal narrow< Span class= "token punctuation" > "> This is a long and Supercalifragilisticexpialidocious sentence. Sub-single language グレートブリテンおよび North アイルランド connected Kingdom で trilogy centered occupies big きな word yeh  </p>          

.normal {    word-break: normal;}

Running results such as:

Word-break:normal Use the default lines break rule. That is, the word is too long to not wrap, beyond the partial overflow.

and see Word-break:break-all.

<p>2.<code>word-break:break-all</code> </p><p class< Span class= "token attr-value" >= "Breakall narrow< Span class= "token punctuation" > "> This is a long and Supercalifragilisticexpialidocious sentence. Sub-single language グレートブリテンおよび North アイルランド connected Kingdom で trilogy centered occupies big きな word yeh  </p>          

.breakAll {    word-break: break-all;}

Running results such as:

Break-all:word breaks may is inserted between any character for NON-CJK (Chinese/japanese/korean) text. Words can be truncated at any location (Chinese, Japanese and Korean excepted)

As mentioned above, Word-wrap:break-word is also a truncation of text. The difference between the two is that break-word for the long text will be changed to the next line to display, if the next line is not finished to wrap. Break-all for long text does not change to the next line, and is truncated directly on the current line (e.g.)

What about the role of Word-break:keep-all? We know that for Chinese, Japanese, Hangul does not appear a long long string like English words. For CJK, the default is a newline display such as:

<p class="narrow"> This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>

This paragraph of the text it works such as:

But sometimes we may encounter such demand, for the Chinese do not let it line, on the same line to display, this is the time for Keep-all. On the basis of the example, plus word-break:keep-all after the display effect such as:

After adding Word-break:keep-all, the Japanese in the picture (not learning the island language, let's call it) is displayed on the same line.

Keep-all:don ' t allow Word to breaks for CJK text. NON-CJK text behavior is the same normal as for. This is the official website to explain this rule. For CJK Text, newline display is not allowed.

The above (word-wrap,word-break) is the processing related to text wrapping in CSS. Next look at White-space.

The explanation for White-space on the official web is that white-space CSS properties are used to describe how to handle spaces in an element.

white-space: normalwhite-space: nowrapwhite-space: prewhite-space: pre-wrapwhite-space: pre-line

Normal

• Successive whitespace characters are merged, and newline characters are treated as whitespace characters. When the line box is filled, it will be wrapped if necessary. That's what we see by default.

  NoWrap

  As with normal, successive whitespace characters are merged. However, the line breaks within the text are not valid. This is why we use white-space:nowrap when we do not want text to be displayed in line-wrapping.

pre

Consecutive whitespace characters are preserved. Line breaks occur when a newline character or <br> element is encountered.

Sometimes, in order to prevent text overflow, we need to hide or wrap the text beyond the containing box. There are times when we have this need to keep the text from wrapping. The above is the collation of my work in accordance with the text in line with some of the problems related to the analysis of processing methods. The website mentioned in this article is only Mozilla official website. If there is something wrong in the text or you have other good ways to deal with text wrapping, you are welcome to discuss it together.

Text wrapping Word-wrap, word-break, and White-space