css中overflow:hidden的使用方法
小编给大家分享一下css中overflow: hidden的使用方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联-专业网站定制、快速模板网站建设、高性价比大兴安岭网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式大兴安岭网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖大兴安岭地区。费用合理售后完善,10年实体公司更值得信赖。
溢出隐藏
就是隐藏超出规定高度的文本或者图像信息。
Document
下图分别是值为hidden和值为auto时截取
还有一个是单行显示文本信息,超出部分用省略号显示(强调一下:必须是一行文本显示才有效哦!)
div { background-color: yellow; width: 350px; margin: 100px auto; white-space: nowrap;/*强调文本在一行内显示*/ overflow: hidden;/*溢出内容为隐藏*/ text-overflow: ellipsis;/*溢出文本显示省略号*/ }
清除浮动
布局的时候经常会用这种左右布局:一个父盒子,父盒子中包含 left 和 right 两个 child 盒子。但是 child 的内容个数大小都不确定,也就不能给父盒子固定的高度,父盒子高度就需要根据 child 盒子高度来改变。下面我们来了解一下!
下面是父盒子给了200px的高度,两个 child 盒子左右浮动,显示是没有问题的。
Document