DIV CSS文字重叠如何解决

DIV+CSS布局文字较多时候重叠下一行文字内容如何解决？

CSS+DIV布局ul li列表文字内容，当文字比较多时，上排文字重叠在下排li标签内文字上这是什么原因？如何解决css文字重叠呢？

内容较多时候重叠下一行内容效果截图
内容较多时候重叠下一行内容效果现象截图

出现原因是因为对li设置了css高度，和css宽度,当内容比较多是内容会自动换行，而又有高度，这样就造成内容溢出而与下一排内容重叠覆盖现象。

解决方法如下：

第一种，取消高度样式设置 - TOP

我们取消css height的样式，即可实现不重叠，但内容会换行占位。

去掉css height高度限制截图
去掉css height高度限制后解决文字重叠截图

第二种，使用隐藏溢出样式单词overflow:hidden - TOP

此方法是使用overflow隐藏超出对象设置宽度高度的内容，推荐使用。

使用css overflow隐藏超出溢出内容

最终案例代码如下：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>内容重叠解决 www.divcss5.com</title> 
<style> 
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代码换行排版 */ 
</style> 
</head> 
<body> 
<ul> 
<li>标题一内容</li> 
<li>测试文字多重叠标题二内容</li> 
<li>标题三内容</li> 
</ul> 
</body> 
</html>

扩展阅读：
1、css隐藏div
2、css隐藏
3、css隐藏溢出DIV内容
4、css隐藏图片上文字
5、css overflow清除浮动
6、css z-index重叠顺序
7、css字体显示一半

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/wenji/w500.shtml