CSS3-文本-word-wrap,word-break，white-space

標籤：解決   bug   port   寬度   w3c   允許   強制   src   png   

一、word-wrap使用：

文法：

   word-wrap ： normal | break-word

 取值說明：

1、normal為預設值，當其值為normal控制連續文本換行(允許內容頂開容器的邊界，換句話說內容可以撐破容器）；

2、break-word將內容在邊界內換行（不截斷英文單詞換行，截斷英文單詞換行需要使用word-break:all屬性）,我們先來看兩個簡單的執行個體：

效果：

　　從效果中可以明顯的看到原始地址和下面兩串超長英文（實際中是沒有這樣的，只是為了測試寫的惡意英文）都超出了box的邊框，但在IE6下是自己擴充了box的寬度，具體原因我在這裡不說了，因為大家都知道呀。所以當word-wrap:normal時，超長的英文長度大於box的寬度時會撐破box伸展到box外（除IE6以及IE6以下版本之外），因為normal是其預設值，當你在別處設定了word-wrap別的值外，而要取消當初的設定，你可以將其設定為normal值，回到當初原始狀態值。

　　從效果中可以明顯的看到當word-wrap值為break-word時，超長英文大於box的寬度時，其碰到box邊緣會自動折行顯示

兩個簡單的執行個體效果對比，大家可以明顯的區別出有word-wrap的兩個值的作用，但當word-wrap應用在<pre>和<table>中時，是沒有任何效果，

 

二、word-break使用：

　　word-wrap:break-word只能在內容中換行，而不能實現詞內換行，如果需要詞內換行，我們需要使用word-break屬性

文法：

   word-break:normal | break-all | keep-all

取值說明

1、normal為預設值，如果設定為預設值時中文則到邊界處的漢字換行，如果是英文整個單詞換行，如果出現某個單詞長度過長，則會撐破容器，如果邊框為固定屬性，則後面部分將無法顯示；

2、break-all：可以強行截斷英文單詞，達到詞內換行效果

3、keep-all:不允許字斷開。如果是中文將把前後標點符號內的一個漢字短語整個換行，英文單詞也整個換行，如果出現某個英文字元長度超過邊界，則後面的部分將撐破容器，如果邊框為固定屬性，則後面部分無法顯示

 

　　說明了word-break取值為normal時，和word-wrap值為normal一樣的效果，超長英文文本寬度大於box的寬度時會撐破box伸展出去（除IE6及其以下版本），另為當其值設定normal時會覆蓋其前面所設的值。

效果上顯示，超長英文文本碰到box邊框處的字母會自動換行，但這裡需要說明一點，在Firefox和Opera下是沒有效果的，也就是說Firefox和Opera不會直接斷詞;因為firefox和opera根本不支援這個屬性。如果使用這個詞需要加上overflow:hidden讓他在firefox和Opera下超出部分隱藏。

綜合上述內容：我們在實際中主要碰到的是長串英文和英文單詞如何斷行的問題，對於長串英文，我個人認為是個惡意的東西，我們沒有必要去理會他，但對於長串的英文單詞，我讓為不能在單詞的某個部位斷開，換句話說最好是行內換行而不應該是詞內換行，這樣一來最好的方式是使用

   word-wrap:break-word;   overflow:hidden;

 而不應該使用

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

 當以上word-wrap：break-word放在<pre>和<table>標籤中時，在Firefox和Opera下是不會換行的

三、white-space屬性：

white-space文法

  white-space: normal || pre || nowrap || pre-line || pre-wrap || inherit

 取值說明

1、normal：為其預設值。空白處會被瀏覽器忽略,往往可以通過設定這個值恢複到預設值下所示：

2、pre:空白處會被瀏覽器保留，其行為方式就類似於HTML中的<pre>標籤，如所示：

3、nowrap:文本不會換行，文本會在同一行上，直到碰到了換列標籤<br />為止，如所示：

4、pre-line:合并空白符序列，但保留分行符號，此屬性不支援IE7.0-,Firefox30-,Opera9.2-下以版本瀏覽器，如所示：

5、pre-wrap:保留空白符序列，但是正常進行換行，此屬性值不支技IE70-,Firefox3.0-版本瀏覽器，如所示

6、inherit：規定應該從父元素繼承white-space屬性的值，此屬性值在所有的IE版本都不支援

　　

　　此時我們可以根據上面介紹的內容，給pre製作出一個相容瀏覽器的寫法：

 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+ */ }  

　　另外一點就是word-wrap和break-word直接應用在table中是沒有效果的，為瞭解決這個bug,只能在table中加上下面的屬性：

   table {      table-layout: fixed;      width: 100px;/*設定表格寬度*/   }

　　

　　我們在不同的地方使用時應該用不同的屬性結合，下面我覺得項目中應該如下使用

一、pre標籤自動換行：

  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+ */ }

　　

二、td標籤自動換行

 table {   table-layout: fixed;   width: *** px; }       table td {   overflow: hidden;   word-wrap: break-word; }

　　

三、除pre,td標籤外其他標籤自動換行：

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

　　

四、標籤內容強制不換行：

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

　　

 轉載自http://www.w3cplus.com/

CSS3-文本-word-wrap,word-break，white-space