溢出(overflow)
当内容超出所在容器的范围时,就会超出容器显示,该现象称为溢出。不同的属性值对应不用的效果,一般利用visible/scroll/auto/ hidden属性值来显示内容。
overflow属性值:
visible
scroll
auto
hidden

visible(默认值)
visible属性值是默认值,内容不会被修剪,呈现在元素框外。
Overflow属性入门
Overflow属性入门
元素默认情况下,overflow的属性值就是visible。

hidden(溢出内容隐藏)
hidden可以隐藏溢出容器的内容,不让溢出内容显示在容器外。
Overflow属性入门
Overflow属性入门
由此可见overflow : hidden; 这个属性值可以隐藏溢出的文本,通常在单行文本显示省略号处搭配使用。

scroll
应用scroll属性值时,内容会被修剪,但浏览器会显示滚动条以便查看内容。
Overflow属性入门
Overflow属性入门
如图所示,应用overflow : scroll; 属性,右侧会出现滚动,以便查看内容。常用于浏览器右下角区域多条广告。同时,overflow-x:hidden;有隐藏横向滚动条的效果;overflow-y:hidden;有隐藏纵向滚动条的效果。

auto
应用scroll属性值,如果内容被修剪,则浏览器会显示滚动条。
Overflow属性入门
Overflow属性入门
如图所示,运用overflow:auto;属性值时,内容文本超出容器,会在容器右侧显示滚动条,常应用于一系列大小图的点击查看。

相关文章: