©2020-2024 ioDraw All rights reserved,
Privacy Policy
✍ 什么是溢出呢，为什么要讲溢出属性呢。下面我们创建一个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，记住这个既可以了