亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

[HTML&CSS基礎]當內容超過盒模型時

第16行寫成

<div id="box1">盒子11111111111111111111111111111111</div>

然后內容就會不換行從右側直接超過邊框。把那堆1換成中文文字，就會自動換行，從下側超過邊框。 這是為什么呢？

正在回答

4 回答

這是一個好問題哈，

#box1{
????width:200px;
????height:200px;
????position:relative;
????/*注意這里?。?！注意這里！??！注意這里！?。?????你只要添加這倆其中一個，字母和數字，都可以自動換行啦，不會超過邊框啦*/
????word-wrap:?break-word;
????word-break:?break-all;
}

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

究竟是什么呢？

word-break 屬性規定自動換行的處理方法。

提示：通過使用 word-break 屬性，可以讓瀏覽器實現在任意位置的換行。

  • 語法

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




  • normal ? ?使用瀏覽器默認的換行規則。 ? ?

  • break-all ? ?允許在單詞內換行。 ? ?

  • keep-all ? ?只能在半角空格或連字符處換行。 ? ?


https://img1.sycdn.imooc.com//5abc9052000105cc04140359.jpg

3 回復 有任何疑惑可以回復我~
#1

月半蟲下 提問者

非常感謝！
2018-03-29 回復 有任何疑惑可以回復我~
#2

Star-∂?мση 回復 月半蟲下 提問者

不客氣！，繼續加油學習哦
2018-03-30 回復 有任何疑惑可以回復我~
0 回復 有任何疑惑可以回復我~

word-break:keep-all;行尾放不下單詞時，另起一行，換行后還是太長會超出容器；

word-wrap:break-word;行尾放不下單詞時，先嘗試換行，換行后還是太長，單詞內還可以換行。

1 回復 有任何疑惑可以回復我~

word-wrap?: normal | break-word

參數：?normal : ?允許內容頂開指定的容器邊界break-word : ?內容將在邊界內換行。如果需要，詞內換行（word-break）也行發生


1 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
初識HTML(5)+CSS(3)-升級版
  • 參與學習       1228802    人
  • 解答問題       19080    個

HTML(5)+CSS(3)基礎教程8小時帶領大家步步深入學習標簽用法和意義

進入課程

[HTML&CSS基礎]當內容超過盒模型時

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號