overflow:hidden不起作用的一种情况


不精确样式:
ul{ margin :0 ; padding :0; float :left ; list-style :none; width :100%;}
li{ float :left ; overflow :hidden ;}
当使用以上样式时,可以看到当li中的内容超过了li的宽度时,overflow属性没起作用。
正确的样式:
ul{ margin :0 ; padding :0; float :left ; list-style :none; width :100%;}
li{ float :left ; overflow :hidden ;text-overflow:ellipsis; white-space:nowrap; }
需要三者配合使用!

来源:http://blog.sina.com.cn/s/blog_67c4e72501010m6l.html

我在测试的时候加上宽度,或者高度才出效果。

 

经验记录:

.global { width:100%; height:auto; position:absolute; bottom:0px; }
.global ul { width:100%; height:auto; padding:0px; margin:0px; }
.global li { list-style:none; text-align:center; float:left; border:1px solid #CCCCCC; margin:2px; }

li个数太多的时候会自动换行,如果将.global的高度设置为height:200px;是没有效果的,要将.global ul的高度设置为height:200px;并且添加元素浮动溢出 overflow:hidden 才可以隐藏。

 

其实我想表达是的,1.有些css属性要配合使用,2.要最近的元素例如:父元素,甚至是元素本身。才有效果。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM