CSS 實現自動換行、強制換行、強制不換行的屬性


---恢復內容開始---

實現效果

1.自動換行:

word-wrap:break-word;

word-break:normal; 

2.強制換行:

word-break:break-all;       按字符截斷換行 /* 支持IE和chrome,FF不支持*/

word-wrap:break-word;    按英文單詞整體截斷換行  /* 以上三個瀏覽器均支持 */

* 注意:單詞換行需要父盒子為塊級元素  

3.強制不換行:

white-space:nowrap;

 

換行屬性語法

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

normal 使用瀏覽器默認的換行規則,允許字內換行。
break-all 允許在單詞內換行。
keep-all 只能在半角空格或連字符處換行。 

2.word-wrap : normal | break-word

normal : 允許內容頂開指定的容器邊界,允許字內換行。
break-word : 內容將在邊界內換行,允許單詞換行。

3.white-space:normal | pre-wrap

 

---恢復內容結束---

實現效果

1.自動換行:

word-wrap:break-word;

word-break:normal; 

2.強制換行:

word-break:break-all;       按字符截斷換行 /* 支持IE和chrome,FF不支持*/

word-wrap:break-word;    按英文單詞整體截斷換行  /* 以上三個瀏覽器均支持 */

* 注意:單詞換行需要父盒子為塊級元素  

3.強制不換行:

white-space:nowrap;

 

換行屬性語法

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

normal 使用瀏覽器默認的換行規則,允許字內換行。
break-all 允許在單詞內換行。
keep-all 只能在半角空格或連字符處換行。 

2.word-wrap : normal | break-word

normal : 允許內容頂開指定的容器邊界,允許字內換行。
break-word : 內容將在邊界內換行,允許單詞換行。

3.white-space:normal | pre-wrap

 

---恢復內容開始---

實現效果

1.自動換行:

word-wrap:break-word;

word-break:normal; 

2.強制換行:

word-break:break-all;       按字符截斷換行 /* 支持IE和chrome,FF不支持*/

word-wrap:break-word;    按英文單詞整體截斷換行  /* 以上三個瀏覽器均支持 */

* 注意:單詞換行需要父盒子為塊級元素  

3.強制不換行:

white-space:nowrap;

 

換行屬性語法

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

normal 使用瀏覽器默認的換行規則,允許字內換行。
break-all 允許在單詞內換行。
keep-all 只能在半角空格或連字符處換行。 

2.word-wrap : normal | break-word

normal : 允許內容頂開指定的容器邊界,允許字內換行。
break-word : 內容將在邊界內換行,允許單詞換行。

3.white-space:normal | pre-wrap

 

---恢復內容結束---

實現效果

1.自動換行:

word-wrap:break-word;

word-break:normal; 

2.強制換行:

word-break:break-all;       按字符截斷換行 /* 支持IE和chrome,FF不支持*/

word-wrap:break-word;    按英文單詞整體截斷換行  /* 以上三個瀏覽器均支持 */

* 注意:單詞換行需要父盒子為塊級元素  

3.強制不換行:

white-space:nowrap;

 

換行屬性語法

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

normal 使用瀏覽器默認的換行規則,允許字內換行。
break-all 允許在單詞內換行。
keep-all 只能在半角空格或連字符處換行。 

2.word-wrap : normal | break-word

normal : 允許內容頂開指定的容器邊界,允許字內換行。
break-word : 內容將在邊界內換行,允許單詞換行。

3.white-space:normal | pre-wrap

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM