Some tests for wrapping CSS text in line

Source: Internet
Author: User
Tags word wrap

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.