css中文字超出div怎麼辦

css中文字超出div的解決方法是，為div添加overflow、word-break、word-wrap屬性，並分別設定屬性值為hidden、break-all、break-word即可。

本文操作環境：windows10系統、css 3、thinkpad t480電腦。

在div中輸入了一串文字，但是文字內容確超出了，如下圖所示：

#現在我要讓多出的文字自動換行，如下圖該怎麼做呢？

使用到的屬性：

overflow 屬性規定當內容溢出元素方塊時發生的事情。

• hidden    內容會被修剪，且其餘內容是看不見的。   

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

• break-all    允許在字內換行。   

word-wrap屬性允許長的內容可以自動換行。

• break-word    在長字或 URL 位址內部進行換行。

具體實作程式碼如下：

html：

<div class="dbubble-text">
    nishi shfishfshfscccccccccccccccccccifhsssfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
 </div>

css：

.dbubble-text {
display: inline-block;
font-size: 14px;
color: #303030;
line-height: 1.6;
font-family: "微软雅黑";
width: 200px;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}

 學習影片分享： css影片教學

以上是css中文字超出div怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！