overflow属性

overflower属性是css中的重要属性。当盒子内的元素超出盒子自身的大小时，内容就会溢出，如果想要规范溢出内容的显示方式，就需要使用overflower属性，其基本语法格式如下：

选择器{overflower：属性值；}

其中，overflower的属性值有4个，分别代表不同的含义，具体如下表：

属性值	描述
visible	内容不会被修剪，会呈现在元素框之外（默认值）
hidden	溢出内容会被修剪，并且被修剪的内容是不可见的
auto	在需要时产生滚动条，即自适应所要显示的内容
scroll	溢出内容会被修剪，且浏览器会始终显示滚动条

 

 

 

 

 

 

下面展示一个案例：

效果图：

在上例中，其中的overflower设置了visible的值，定义了溢出内容不会被裁减，而是呈现在其他地方设定的值。在效果图中可以看出，文字超出元素框，并没有被剪切，继续呈现在页面中。如果想要超出部分被剪切，且不可见，可将overflower属性设为hidden。

代码如下：

效果图：

由此看出，overflower：hidden 可以将超出部分剪切，且被隐藏不可见。

另外，如果希望元素框能够自适应其内容的多少，在内容溢出时，产生滚动条，否则，则不产生滚动条，可以将overflower的属性值定义为auto。

代码如下：

效果如下：

 在图中，元素框下方显示了滚动条，拖动滚动条可以查看溢出的内容。当盒子内容减少时，滚动条就会消失。

值得一提的是，当定义overflower的属性值为scroll时，元素框中也会产生滚动条。

代码如下：

 效果如下：

在图中，元素框中出现了水平和竖直方向的滚动条。与“overflower：auto；”不同，当定义“overflower：scroll”时，不论元素是否溢出，元素框中的水平和竖直方向 滚动条始终存在。