html如何設(shè)置文字超出換行

發(fā)布時間：2021-12-14 15:33:47 來源：億速云閱讀：889 作者：小新欄目：web開發(fā)

小編給大家分享一下html如何設(shè)置文字超出換行，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

html中可通過word-wrap、word-break和overflow屬性設(shè)置文字超出換行，只需給文字元素添加“word-wrap:break-word;word-break:break-all;overflow:hidden;”樣式。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

遇到一個難題，如圖：

html如何設(shè)置文字超出換行

這樣導(dǎo)致效果看起來非常不美觀，我們最理想的狀態(tài)應(yīng)該是讓 div 里面的內(nèi)容如果超出 div 的寬度，就應(yīng)該使內(nèi)容換行顯示。

解決辦法：

首先我們要先確定 div 是有寬度的，然后在加上 css 樣式：代碼如下：

word-wrap:break-word; 
word-break:break-all; 
overflow: hidden;

結(jié)果如下：

html如何設(shè)置文字超出換行

這樣就達到了我們想要的效果。

以上是“html如何設(shè)置文字超出換行”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

猜你喜歡