DIV+CSS布局文字較多時候重疊下一行文字內(nèi)容如何解決？

CSS+DIV布局ul li列表文字內(nèi)容，當(dāng)文字比較多時，上排文字重疊在下排li標簽內(nèi)文字上這是什么原因？如何解決css文字重疊呢？

內(nèi)容較多時候重疊下一行內(nèi)容效果現(xiàn)象截圖

出現(xiàn)原因是因為對li設(shè)置了css高度，和css寬度,當(dāng)內(nèi)容比較多是內(nèi)容會自動換行，而又有高度，這樣就造成內(nèi)容溢出而與下一排內(nèi)容重疊覆蓋現(xiàn)象。

解決方法如下：

第一種，取消高度樣式設(shè)置

我們?nèi)∠鹀ss height的樣式，即可實現(xiàn)不重疊，但內(nèi)容會換行占位。

去掉css height高度限制后解決文字重疊截圖

第二種，使用隱藏溢出樣式單詞overflow:hidden

此方法是使用overflow隱藏超出對象設(shè)置寬度高度的內(nèi)容，推薦使用。

使用css overflow隱藏超出溢出內(nèi)容

最終案例代碼如下：

內(nèi)容重疊解決 css5.com.cn

ul,li{ list-style:none}

ul{ width:100px}

ul li{ float:left;width:100px; height:22px;line-height:22px;

text-align:left; overflow:hidden}

/* css注釋：為了便于截圖，將CSS代碼換行排版 */

• 標題一內(nèi)容
• 測試文字多重疊標題二內(nèi)容
• 標題三內(nèi)容

作者：css5

總結(jié)

以上是生活随笔為你收集整理的css 文字重叠_html网页文字重叠 字体叠加显示css如何解决的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。