CSS中的Overflow是用来控制标签元素中内容超出元素边界的处理方式,处理方式一般有超出显示visible、滚动scroll、裁剪hidden等.
在CSS中如果不用溢出来处理的话,当内容超出元素标签边界时,会超出显示,就像下面这张图。
上图的布局不仅破坏了div的单行限宽显示,其他相关元素也会相应的挤出原有的位置,所以这时就需要overflow来处理溢出的处理,以达到我们布局的目的,默认值overflow:visible就是这种情况。
我们可以使用overflow:hidden,属性来设置超出部分隐藏,然后显示如下:
在这里同样的我们需要设置overflow:scroll;属性来定义超出部分使用滚动条来显示:
<style> div{ border: 1px solid black; width:200px; overflow: visible; /*overflow: hidden;*/ /*overflow: scroll;*/ white-space: nowrap; /*此处代码的含义是不换行显示*/ } </style> <div>hello 我是文本演示呦~hello 我是文本演示呦~hello 我是文本演示呦~</div>
学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~
jQuery2021-01-08
jQuery2021-01-07
MySQL2020-12-13
电脑2020-12-12
服务器2020-12-06
电脑2020-10-06