前端文本的溢出隐藏

设置方式

单行文本的溢出隐藏

overflow:hidden; //溢出隐藏

text-overflow:ellipsis;//超出显示省略号

white-space:nowrap;//强制文本在一行内显示

多行文本的溢出隐藏

overflow: hidden;

text-overflow: ellipsis; // 超出显示'...'

display: -webkit-box; // 将元素作为弹性伸缩盒子模型显示 。

-webkit-line-clamp: 2; // 用来限制在一个块元素显示的文本的行数

-webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式

对于代码的解释

对于溢出的文本是否用省略号标记 “…” 或者没有任何的省略号标记
使用该属性必须有几个前提条件：

1. 该容器必须有 width 宽度 ，如果没有设置宽度该字数的溢出隐藏没有意义

2. 强制文本一行显示：white-space：nowrap；或者一个控制文本的行数 ： -webkit-line-clamp: 2; 这里表示设置的行数是2行

3. 该容器必须有溢出属性： 就是要有 overflow: hidden 属性

   1. overflow：visible 默认值，不会被隐藏就是正常的显示
   2. hidden 内容隐藏 ，对于超出容器宽度的内容隐藏
   3. auto 自动判断，如果内容隐藏，则浏览器内显示滚动条
   4. scroll 内容会隐藏并显示滚动条
   5. inherit 表示从父元素继承overflow属性的值
   6. overflow-x：hidden；隐藏横向滚动条 overflow-y：hidden；隐藏纵向滚动条

4. 溢出文本显示“…”：text-overflow：ellipsis；

对于剩余空间属性的一些属性值

white-space: 属性
1. 　normal 默认值，空白会被浏览器忽略
2. 　nowrap 表示文本不换行，文本会在同一行上继续，直到遇到标签
为止
3. pre 表示保留空白，与html的 pre 标签类似
4. pre-wrap 表示保留空白的符序列，和正常的换换行一样
5. pre-line 表示对空白进行合并，但是保留换行符
6. inherit 表示从父级元素继承 white-space的属性 （但是ie浏览器不支持该属性）

对于-webkit-line-clamp属性

1. 这是一个不规范的css属性，用于限制文本的字数
2. 它必须结合一下几个属性一起用：
   1. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
   2. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
   3. text-overflow，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本
3. 它只适用于块级元素
4. 对于兼容，只兼容谷歌和苹果浏览器(pc移动都支持)，Opera支持pc端