CSS+DIV布局ul li列表文字内容,当文字比较多时上排文字会重叠在下排li标签内文字上,造成文字重影的现象,我们该如何解决这种情况呢?下面我们来看一下css如何解决文字重影。
出现原因是因为对li设置了css高度,和css宽度,当内容比较多是内容会自动换行,而又有高度,这样就造成内容溢出而与下一排内容重叠覆盖现象。
css解决css文字重影的方法:
第一种,取消高度样式设置
我们取消css height的样式,即可实现不重叠,但内容会换行占位。
第二种,使用隐藏溢出样式单词overflow:hidden
此方法是使用overflow隐藏超出对象设置宽度高度的内容,推荐使用。
内容重叠解决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代码换行排版 */
- 标题一内容
- 测试文字多重叠标题二内容
- 标题三内容
效果如下: