css中的溢出属性设置

容器的溢出属性

当容器的内容超出容器范围时，就会超出容器，称之为溢出，如下图

要解决溢出，就需要用到overflow的属性，如图：
overflow：visible/hidden/scroll/auto/inherit

1、visible：默认值，内容不会被修剪，会成现在元素框之外；（没什么用）
2、hidden：超出的内容会被隐藏起来不显示

3、scroll：生成滚动条（无论内容超没超出容器范围都生成滚动条）

4、auto：超出容器范围时，会生成滚动条，没超出时不会生成滚动条

5、inherit：从父元素继承overflow的属性值

空余空间

如下图所示，代码中敲了很多空格，但是浏览器只能识别一个，针对空白的处理，css中有一个专门的属性：whit-space

whit-space：normal/nowrap/pre/pre-wrap/pre-line/inherit
该属性用来设置如何处理元素内的空白
1、normal：默认值，空白会被浏览器合并为一个；（没什么用）
2、nowrap：强制不换行，文本会在一行上排列，直到遇到br；

3、pre：也不会换行，空白会被保留；

4、pre-wrap：保留空白符序列，但是正常的进行换行；

5、pre-line:合并空白符序列，但是保留换行符；

6、inherit：规定应该从父元素继承White-space属性的值；

省略号显示

将溢出的文本以省略号的形式显示；
text-overflow：clip/ellipsis
1、clip：不显示省略号（...），而是简单的将溢出内容裁切掉；
2、ellipsis：当文本溢出时，显示省略号标记；
text-overflow属性仅是...，当单行文本溢出时是否显示省略标记，并不具备其它的样式属性定义

单行文本的溢时，显示省略号步骤

1、容器宽度：width：value；

2、强制文本在一行内显示：white-space：nowrap；

3、将溢出内容隐藏：overflow：hidden；

4、将超出内容显示为省略号：text-overflow：ellipsis；

多行文本的溢出设置

所需属性及属性值：
1、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
2、-webkit-box-orient: vertical; 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

3、-webkit-line-clamp: 5（数值）;用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性，比如上面的两个属性

4、overflow: hidden;

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；但文字未超出行的情况下也会出现省略号,可结合js优化该方法

转载于:https://juejin.im/post/5d2e9656f265da1bc37f43cc