white-space和word-wrap和word-break所表示的換行和不換行的區別

 

1、前言

　　使得文本換行有不少方式，

1. <br/>標籤元素，可以強制使得所在位置文本換行
2. <p>元素，<div>設定寬度，均可以對文本內容實現自適應換行
3. 對於長單詞或者連接，默認不會斷開換行，方式2就不可以在其這些文本內部進行換行了，
   這時就須要word-wrap : break-word ;或者word-break:break-all;實現強制斷行

 

2、正文

1. 強制不換行

div{
    white-space:nowrap;
}
/*
white-space：normal 默認 
pre 換行和其餘空白字符都將受到保護
nowrap 強制在同一行內顯示全部文本，直到文本結束或者遭遇 br 對象
*/

2. 控制文本換行

div{
   word-break: normal;

　　word-break: break-all;

　　word-break: keep-all;

}
/*
word-break: 
normal ; 依照亞洲語言和非亞洲語言的文本規則，容許在字內換行
break-all : 　該行爲與亞洲語言的normal相同。也容許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all : 　與全部非亞洲語言的normal相同。對於中文，韓文，日文，不容許字斷開。適合包含少許亞洲文本的非亞洲文本
*/

3. 強制單詞內或連接內斷行

div{

　　word-wrap: break-word;

}
/*
word-wrap 屬性用來標明是否容許瀏覽器在長單詞和連接內進行斷句
normal: 只在容許的斷字點換行(瀏覽器保持默認處理)
break-word:在長單詞或URL地址內部進行換行
*/

 

 詳細介紹：

（一）white-space 屬性設置如何處理元素內的空白 

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

• normal默認。空白會被瀏覽器忽略。 
• pre 空白會被瀏覽器保留。其行爲方式相似 HTML 中的 pre 標籤。 
• nowrap文本不會換行，文本會在在同一行上繼續，直到遇到 br 標籤爲止。 
• pre-wrap 保留空白符序列，可是正常地進行換行。 
• pre-line 合併空白符序列，可是保留換行符。 
• inherit 規定應該從父元素繼承 white-space 屬性的值。

 

（二）word-wrap 屬性用來標明是否容許瀏覽器在單詞內進行斷句

　   word-wrap: normal|break-word; 

　　word-wrap 屬性用來標明是否容許瀏覽器在單詞內進行斷句

• normal: 只在容許的斷字點換行(瀏覽器保持默認處理) 
• break-word:在長單詞或URL地址內部進行換行，

  /*內容將在邊界內換行。若是須要，單詞內部容許斷行。*/

（三）word-break 屬性用來標明怎麼樣進行單詞內的斷句

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

• normal：使用瀏覽器默認的換行規則。 
• break-all:容許在單詞內換行 ， 容許任意非CJK(Chinese/Japanese/Korean)文本間的單詞斷行。
• keep-all:只能在半角空格或連字符處換行，
  不容許CJK(Chinese/Japanese/Korean)文本中的單詞換行，只能在半角空格或連字符處換行。非CJK文本的行爲實際上和normal一致。
  

 

3、結語

https://www.cnblogs.com/yingzi1028/p/6113066.html

word-break: break-all;、word-break: keep-all; 、word-wrap: break-word;和white-space:nowrap;都有什麼做用