Some tests for wrapping CSS text in line

The following test-based versions of the browser are as follows:

chrome:38

firefox:30.0

Ie:11

Let's look at the following code (no CSS styles are added):

<p id= "Word1" >this is a very long Word:veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword </p><p id= "Word2" > It's a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very

Effect:

Chrome:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/6E/B4/wKioL1WDswLB5OOXAADHZMo5M5g000.jpg "title=" 1.png " alt= "Wkiol1wdswlb5ooxaadhzmo5m5g000.jpg"/>

Firefox

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/6E/B4/wKioL1WDszbQJESHAADmgJJhxxA304.jpg "title=" 2.png " alt= "Wkiol1wdszbqjeshaadmgjjhxxa304.jpg"/>

Ie:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/6E/B7/wKiom1WDsZrhsIRWAADtpYK7a-4366.jpg "title=" 3.png " alt= "Wkiom1wdszrhsirwaadtpyk7a-4366.jpg"/>

Note: The above ":" is a Chinese character. If it is in English ":" Then, the effect is the same in three browsers:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/6E/B4/wKioL1WDtRGDIvrVAADXnYNTzzM917.jpg "title=" 4.png " alt= "Wkiol1wdtrgdivrvaadxnyntzzm917.jpg"/>

An attempt to wrap text in a line

in terms of terminology, this expected rendering is called word wrap, which means that the text processor has the ability to automatically propagate the entire word beyond the page to the next line.

The very long front of the English word (albeit sporogenous) in order to ensure the full display, helplessly beyond the limits of the container, it overflowed. In order to "fix" this "problem" so that both East Asia and Western 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; " Such a property:

<style> #word1 {word-wrap:break-word; word-break:break-all;} </style><p id= "Word1" >this is a very long word: veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword</p >

Effect:

Chrome, Firefox, IE:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/6E/B8/wKiom1WDtT3DLKjNAAB5OzicoQo560.jpg "title=" 1.png " alt= "Wkiom1wdtt3dlkjnaab5ozicoqo560.jpg"/>

Add a little bit of knowledge:

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

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

In the text rendering rules, the two are very different, CJK text, a letter is a character (word), independent into Righteousness,! In CJK text, some letters form a single character, and the elements are concatenated by the connector "-", or separated by a space "".

• More on the typographic rules of CJK text, the more representative is: for Chinese, punctuation cannot be the beginning of the line (except for special); double-word punctuation (ellipses, dashes) cannot be broken.

• For! CJK, mainly: words cannot be broken in the middle (for example, from a connector); punctuation cannot be the beginning of a line (except for special)

Word-wrap, Line-break, word-break These properties are independent implementations of MS, and then other browsers have implemented some of them in varying degrees, after which the properties are absorbed into the CSS3 standard. In the rendering of text typesetting, Microsoft is still ahead.

In the existing draft CSS3, there are several important properties related to typography: White-space, Text-wrap, Word-wrap, Line-break, Word-break.

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/6E/B8/wKiom1WDt3_BGaRLAAM7aE6hlDE374.jpg "style=" float: none; "title=" 2.png "alt=" Wkiom1wdt3_bgarlaam7ae6hlde374.jpg "/>

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/6E/B4/wKioL1WDuTGRlj-KAAKYwVxMqus067.jpg "style=" float: none; "title=" 3.png "alt=" Wkiol1wdutgrlj-kaakywvxmqus067.jpg "/>

Make a generalization: the attributes that are specifically used to control text wrap are text-wrap and word-wrap, while Line-break and Word-break are used to control line breaks and word boundary separation, according to the description, Word-wrap Is the most radical way to line up, you can forcibly break the word. And the reality is, Word-break:break-all; In a more radical way:

<style> #p1 {Word-wrap:break-word;} #p2 {word-break:break-all;} 　　</style><p id= "P1" >great works is performed not by Strengh, but by perseverance. Samuel Johnson, British writer and critic <p><p id= "P2" >great Works is performed not by Strengh, but by Perse 　　Verance. Samuel Johnson, British writer and critic <p>

Effect:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/6E/B4/wKioL1WDuwjDqKzHAACc7Nd9nm0752.jpg "title=" 4.png " alt= "Wkiol1wduwjdqkzhaacc7nd9nm0752.jpg"/>

This article is from the "Isymu" blog, make sure to keep this source http://isymu.blog.51cto.com/1460577/1663563

Some tests for wrapping CSS text in line