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

 

一、前言

　　使得文本換行有很多方式，

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

 

二、正文

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一致。
  

 

三、結語

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

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