Css3-text-word-wrap,word-break,white-space

first, Word-wrap use:

Grammar:

   Break-word

value Description:

1, Normal is the default value, when its value for the normal control of continuous text wrapping (allow the content to open the boundaries of the container, in other words, the content can burst container);

2, Break-word The content within the boundaries of the line ( do not truncate the English word wrap , truncated English word wrapping needs to use the Word-break:all attribute), we first look at two simple examples:

Effect:

From the effect can be obvious to see the original address and the following two strings of ultra-long English (in fact, There is no such, just to test written malicious english) are outside the box border, but in the IE6 is expanding the width of box, specific reasons I do not say here, because everyone knows it. So when word-wrap:normal, the long length of English is larger than the box width will burst box to extend outside box (except IE6 and IE6 the following version), because normal is its default value, when you set the Word-wrap other values elsewhere, To cancel the initial setting, you can set it to the normal value and return to the original state Value.

From the effect can be clearly seen when the Word-wrap value is break-word, when the extra long English is greater than the box width, it touches the box edge will automatically fold the line display

Two simple example effect comparison, we can clearly distinguish the effect of the two value of word-wrap, but when the Word-wrap application in <pre> and <table>, there is no effect,

second, Word-break use:

　　Word-wrap:break-word can only wrap in the content, and cannot implement word wrapping , if you need word wrapping, We need to use the Word-break property

Grammar:

   word-Break-all | Keep-all

Value Description

1, Normal is the default value, if set to the default value when the Chinese character line to the border, if the whole word wrapped in english, if a word length is too long, the container will burst, if the border is a fixed property, the latter part will not be displayed;

2, Break-all: can forcibly truncate English words, to achieve the word in line effect

3, Keep-all: word disconnection is not allowed. If it is Chinese will be in the punctuation of a Chinese character phrase throughout the line, the English word is also the entire line, if a certain English character length exceeds the boundary, then the next part will burst the container, if the border is a fixed property, then the later part can not be displayed

This shows that when the Word-break value is normal, and the Word-wrap value is the same as normal, the long English text width is larger than the width of box will burst box to extend (except IE6 and the following versions), It also overrides the value that was set before it when the value is set to Normal.

The effect shows that the extra-long English text touches the letter of the box border automatically, but here it needs to be explained that there is no effect in Firefox and opera, that is, Firefox and opera do not directly break words, because Firefox and opera do not support this property at All. If you use this word you need to add Overflow:hidden to let him in Firefox and opera beyond the partial Hidden.

The above content: we mainly encountered in the actual long string of English and English words how to break the problem, for a long string of english, I personally think is a malicious thing, we do not need to ignore him, but for a long string of English words, I let the word can not be broken in a certain part, In other words, the best way to do this is to wrap lines within a line and not to wrap the word inside.

   word-Wrap: break-word;   overflow: hidden;   

And should not be used

  Word-wrap:break-word;  Word-break:break-all;  

When the above Word-wrap:break-word is placed in the <pre> and <table> tab, It will not be wrapped in Firefox or Opera.

third, White-space properties:

White-space syntax

  normal | | Pre | | nowrap | | Pre-line | | Pre-wrap | | Inherit

Value Description

1,Normal: for its default Value. the Blank space is ignored by the browser, and can often be restored to the default value by setting this value:

2.Pre: The Blank Space is reserved by the browser and behaves like a <pre> tag in HTML , as shown in:

3,nowrap: text does not wrap, the text will be on the same line until a newline label is encountered <br/> , as shown in:

4.pre-line: merges the whitespace sequence, but preserves the newline character , this property does not support Ie7.0-,firefox30-,opera9.2-under the version browser as shown in:

5,pre-wrap: preserves the whitespace sequence, but the normal line wrapping, This property value is not technical ie70-,firefox3.0-version browser, as shown in

6,inherit: Specifies that the value of the White-space property should be inherited from the parent element, and this property value is not supported in all IE versions

　　

At this point, we can create a compatible browser for the pre based on the content described above:

pre{    white-space:pre;           /* CSS 2.0 */    white-space:pre-wrap;      /* CSS 2.1 */    white-space:pre-line;      /* CSS 3.0 *    /white-space:-pre-wrap;     /* Opera 4-6 *    /white-space:-o-pre-wrap;   /* Opera 7 *    /white-space:-moz-pre-wrap!important;/* Mozilla *    /white-space:-hp-pre-wrap;  /* HP Printers */    word-wrap:break-word;      /* IE 5+ */}  

Another point is that word-wrap and Break-word directly apply to the table is not effective, in order to resolve this bug, you can only add the following properties in the Table:

   Table {      table-layout:fixed;      width:100px;/* Set Table width */   }

　　

We should use different attributes when using different places, I think the project should use the following

first, the pre tag automatically wraps:

  pre{    white-space:pre;           /* CSS 2.0 */    white-space:pre-wrap;      /* CSS 2.1 */    white-space:pre-line;      /* CSS 3.0 *    /white-space:-pre-wrap;     /* Opera 4-6 *    /white-space:-o-pre-wrap;   /* Opera 7 *    /white-space:-moz-pre-wrap!important;/* Mozilla *    /white-space:-hp-pre-wrap;  /* HP Printers */    word-wrap:break-word;      /* IE 5+ */}

　　

second, TD label Automatic line-wrapping

Table {   table-layout:fixed;   Width: * * * px; }       table TD {   Overflow:hidden;   word-wrap:break-word; }

　　

third, In addition to the PRE,TD label other labels automatically wrap:

  Element {    overflow:hidden;    word-wrap:break-word;  }  

　　

four, the label content is forced not to break the line:

   Element {      white-space:nowrap;      word-break:keep-all;   }

　　

Reprinted from http://www.w3cplus.com/

Css3-text-word-wrap,word-break,white-space