Text wrap: word-wrap, word-break, and white-space,

Text wrap: word-wrap, word-break, and white-space,

Synchronize this article to public number: http://mp.weixin.qq.com/s? _ Biz = MzAxMzgwNDU3Mg ==& mid = 401671055 & idx = 1 & sn = b88c986e61708da0027fac035ad36f0f # rd

If you are interested in subsequent articles, add the following:

The text is not fully displayed in some places. To view all the content, click the original text link above.

When formatting the page content, you may encounter text processing problems. Today, I sorted out Text wrap-related content and recorded it for sharing. After all, it is better to have a good memory than a bad pen.

For text wrapping, you have also dealt with related issues before. You need to use style rules such as word-wrap, word-break, and white-space. However, it is still unclear about the differences between the three. Based on the principle of combining theory with practice and seeking truth from facts, I took the time to read it today.

Search for word-wrap on the mozilla website and get the following explanation:

Theword-wrapProperty is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.

Word-breakExplanation:

The word-breakCSS property is used to specify whether to break lines within words.

The word-wrap attribute is used to indicate whether the browser is allowed to break a sentence in a word. This is to prevent the occurrence of Box-containing overflow when a string is too long and cannot be found.

Word-break indicates how to break a sentence in a word.

Literally, the two are used to wrap text. What is the difference between the two? Let's take a look at the examples on the official website.

First, let's take a look at the word-wrap Syntax:

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

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

When you specify word-wrap: normal (default value), we can see that Fernstra has enbauprivatfinanzierungsgesetzesund, which is a long string of des and cannot be displayed in another line, it also overflows from its container.

 

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

When we add the style word-wrap: break-word to the p element, the running result is as follows:

We can see that the length of Fernstra incluenbauprivatfinanzierungsgesetzesund will still be changed to the next line. When the width of the current line is still not displayed enough, it will display a line break. The break-word on the official website is interpreted as Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line. in my personal understanding, for common text, when the remaining space of the container is insufficient to display, it can be truncated anywhere (line feed is displayed ).

Next, let's take a look at the example of word-break on the official website:

Word-break Syntax:

 

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

Let's take a look at the following three instances:

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

 

<P> 1. <code> word-break: normal </code> </p> <p class = "normal narrow"> This is a long and Supercalifragilisticexpialidocious sentence. this is why the United Kingdom has never been written before </p>

.normal {    word-break: normal;}

The running result is as follows:

Word-break: normal Use the default line break rule. That is, if the word is too long, it does not wrap the line, and the excess part overflows.

Let's take a look at word-break: break-all.

 

<P> 2. <code> word-break: break-all </code> </p> <p class = "breakAll narrow"> This is a long and Supercalifragilisticexpialidocious sentence. this is why the United Kingdom has never been written before </p>

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

The running result is as follows:

Break-all: Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text. words may be truncated at any position (except Chinese, Japanese, and Korean)

As mentioned above, word-wrap: break-word also truncates text. The difference between the two lies in that break-word will be changed to the next line for long text display, if the next line is also not displayed, line feed. Break-all does not change the long text to the next line and is directly truncated from the current line (for example)

So what is the role of word-break: keep-all? We know that there is no long string like an English word in Chinese, Japanese, or Korean. For CJK, the default line feed is shown as follows:

 

<P class = "narrow"> This is a long and Supercalifragilisticexpialidocious sentence. this is why the United Kingdom has never been written before </p>

The running effect of this text is as follows:

However, sometimes we may encounter such a requirement that we do not want to wrap the Chinese character and display it in the same line. This is the time for keep-all to appear. Based on the example, the display effect after word-break: keep-all is added is as follows:

After word-break: keep-all is added, the Japanese in the figure is displayed in the same line (for example, I have never studied the Island language.

Keep-all: Don't allow word breaks for CJK text. Non-CJK text behavior is the same asnormalThis is the explanation of this rule on the official website. For cjk text, line breaks are not allowed.

The above (word-wrap, word-break) is the processing of text wrapping in css. Next let's take a look at white-space.

What is the explanation of white-space on the official website?white-spaceCSS attributes are used to describe how to process spaces in elements.

 

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

Normal

• Consecutive blank spaces are merged and linefeeds are treated as blank spaces. Line breaks when necessary to fill the line box. This is what we see by default.

  Nowrap

  Like normal, consecutive blank spaces are merged. The line feed in the text is invalid. This is also the reason why white-space: nowrap is used when we do not want text to be displayed with line breaks.

   

pre

Consecutive white spaces are retained. When a line break or<br>Line breaks only when elements are added.

Sometimes, to prevent text overflow, we need to hide or wrap the text beyond the contained box. Sometimes, we need to avoid text line breaks. The above is an analysis of some issues related to text wrapping and the handling methods I encountered during my daily work .. The official website mentioned in this article is only the official site of mozilla. If there is something wrong with the text or you have other good methods to handle text line breaks, please discuss it together.