CSS3 Text line Wrapping

Text wrapping is a very common but unobtrusive feature. You don't have to set anything, the browser will automatically wrap. For example, in English, the browser chooses to wrap a half-width space or a hyphen, depending on the size of the container. For example, in Chinese, the browser chooses to wrap text or punctuation. But sometimes encountered long word or URL browser is not so smart, there will be bursting container phenomenon, it is difficult to see, such as

Container fixed width of 150px, the normal text, such as the left-hand browser is sufficient for the automatic line, the right to meet long words or URLs, the browser is powerless. Of course, you can set the Overflow:auto for the container, and let the scroll bar appear to avoid bursting the container. or simply Overflow:hidden; let out the part of the hide, see

But the total feeling overflow is not ideal, there should be a special property for the newline. This article describes the 3 types of line-wrapping properties

Word-wrap
Word-break
White-space
Word-wrap
Word-wrap can realize word breaking and wrapping. can be set Normal,break-word. Default value normal is not set, do not repeat. Break-word allows word breaking to break. such as the right image set Word-wrap:break-word, after the browser's execution process: found that long words can not be displayed, according to the default line-breaking rules, with half-width space to wrap, so ooops too behind a blank, long words moved to the second line found still not show, so broken word line, Long words and URLs are therefore truncated in the middle.

Word-break
Word-break can set how the browser wraps itself. can be set Normal,break-all,keep-all. Default value normal is not set, do not repeat. Break-all the browser's line-breaking mode to allow word breaks based on container size. And the above Word-wrap:break-word, what is the difference? Look, the Blue line part.

Left Word-wrap Break-word is the default browser line wrapping, so "ooops too" after a blank, there is an explanation, do not repeat. Right Figure Word-break Break-all is to change the browser default line wrapping, let the browser ignore the half-width space, directly according to the size of the container to wrap, so when encountering long words, the word break line. effect on the Word-break:break-all; more than Word-wrap:break-word; save page space.

Keep-all is not allowed to break words, in the case of English department equivalent to normal, equivalent to not set. In the case of CJK, Normal and Keep-all are different, see

In the case of CJK, Normal still equals no setting, and the browser chooses to wrap the text or punctuation. However, after being set to Keep-all, the word break will no longer be allowed (even in CJK), and can only be changed according to the half-width space or punctuation as the English department.
White-space

White-space set whitespace and newline characters. can set the default value of normal, can be set to pre, Nowrap,pre-line,pre-wrap. Results see

<p style= "WHITE-SPACE:XXX;" >//xxx Replace the corresponding value
Ooops too loooooooooooooooooooooong!

The first team to win four games will win the NBA championship.
</p>
Normal, the browser ignores extra white space characters by default (use the space bar instead of the spacebar if you want to display multiple whitespace characters) and line breaks.

The pre preserves whitespace and line breaks, which are equivalent to <pre> tags. To eliminate this line break in the first line, it is common to change the HTML side to the following so that extra empty lines are removed

<p style= "WHITE-SPACE:PRE;" >ooops too loooooooooooooooooooooong!
The first team to win four games will win the NBA championship.
</p>

Or

<p style= "WHITE-SPACE:PRE;" ><!--
--Ooops too loooooooooooooooooooooong!
The first team to win four games will win the NBA championship.
</p>
The difference between nowrap and normal is that it does not wrap automatically. When you use the Text-overflow attribute you need to cooperate with white-space:nowrap; and Overflow:hidden;

Pre-line ignores extra whitespace characters (to display multiple whitespace characters, instead of spacebar), but preserves line breaks and wraps them automatically

The difference between Pre-wrap and Pre-line is that it preserves extra whitespace characters

Summarize
<pre> tags in the display of the source code, encountered a URL attribute will be very long, resulting in the bursting of the page (especially the mobile side), you can use white-space:pre-wrap; plus word-wrap:break-word;

<pre> the common force-wrapping method outside the label is Overflow:hidden, plus word-wrap:break-word;

Force does not break the line can white-space:nowrap; plus word-break:keep-all;