css溢出属性：overflow属性介绍

✍ 什么是溢出呢，为什么要讲溢出属性呢。下面我们创建一个200*150的div标签大小，背景色为橙色，内容为一串英文

代码演示：

 结果：

 结果发现这个文本有溢出的情况，背景上放不下这个文本，所以有一部分溢出了，那我们该怎么显示这个溢出的文本呢，这就涉及到我们接下来要说的溢出属性了。往下看

✍溢出的解决办法有：

（1）隐藏  （2）滚动条  （3）用省略号显示  （4）

✍溢出属性介绍：

---

✍我们来演示一下这些属性：

（1）overflow：visible：

• 默认值，溢出元素会显示在元素外；这个不用演示，就跟我们普通形式一样默认是溢出显示。效果如下：

（2）overflow：hidden：

• 溢出内容隐藏，只要超过盒子的都会隐藏，比如说一段英文上半部分显示在盒子里，下半部分显示在盒子外，那盒子外的部分就也会隐藏，这样那段英文就会被截断。

代码：

 结果：

 （3）overflow：scroll：

• 只要加上了这段代码就会出现滚动条，只是如果文本没有超过盒子，那滚动条是被禁用的，如果文本超过了盒子，滚动条就会启用

代码：

 结果：

 文本没有超过盒子的效果：滚动条被禁用

 （4）overflow：auto：

• 如果有溢出就会添加滚动条，没有溢出就正常显示

没溢出：

 结果：

 溢出的效果：

（5）overflow：inherit：

• 规定应该遵从父元素继承overflow属性的值。这个不常用就不演示了

（6）overflow-x：auto/hidden/scroll/inherit    overflow-y： auto/hidden/scroll/inherit

• x轴和y轴同时设置可以实现一个方向上的样式，比如说x方向上的滚动条显示：
• overflow-x：auto    overflow-y：hidden 
• 要同时设置x和y的属性值，不然实现不了 

（7）white-space：nowrap：

• 盒子里的文本不受盒子控制，不会根据盒子换行，会在同一行上显示，直到遇见<br>标签为止和overflow：hidden；以及text-overflow：ellipsis一起写就能出现省略号的效果啦 

代码演示：

结果：

 没有加white-space：nowrap这句代码之前的结果是：

 对比一下，发现加代码之后，文本就变成了一行显示，这就是我们要写出省略号之前要做的事情，

和overflow：hidden；以及text-overflow：ellipsis结合出现省略号的效果，解决溢出问题

代码如下：

结果：

✍text-overflow属性解释： 

✍注意一下几点，文本溢出才能显示省略号： 

第一个的意思是：必须有宽度width

 white-space的其他属性，都不常用所以在这里就不演示了，常用的就nowrap，记住这个既可以了