溢出(overflow)
当内容超出所在容器的范围时,就会超出容器显示,该现象称为溢出。不同的属性值对应不用的效果,一般利用visible/scroll/auto/ hidden属性值来显示内容。
overflow属性值:
visible
scroll
auto
hidden
visible(默认值)
visible属性值是默认值,内容不会被修剪,呈现在元素框外。
元素默认情况下,overflow的属性值就是visible。
hidden(溢出内容隐藏)
hidden可以隐藏溢出容器的内容,不让溢出内容显示在容器外。
由此可见overflow : hidden; 这个属性值可以隐藏溢出的文本,通常在单行文本显示省略号处搭配使用。
scroll
应用scroll属性值时,内容会被修剪,但浏览器会显示滚动条以便查看内容。
如图所示,应用overflow : scroll; 属性,右侧会出现滚动,以便查看内容。常用于浏览器右下角区域多条广告。同时,overflow-x:hidden;有隐藏横向滚动条的效果;overflow-y:hidden;有隐藏纵向滚动条的效果。
auto
应用scroll属性值,如果内容被修剪,则浏览器会显示滚动条。
如图所示,运用overflow:auto;属性值时,内容文本超出容器,会在容器右侧显示滚动条,常应用于一系列大小图的点击查看。