单（多）行文本溢出显示省略号...

Posted 2020-10-04 Candy-Yao

一、单行文本

width:XXXpx;
overflow: hidden; //溢出隐藏
text-overflow: ellipsis; //显示省略号来代替被修剪的文本
white-space: nowrap; //不换行

　注：white-space:normal（默认，空白会被浏览器忽略）|pre（空白会被浏览器保留，行为方式如同<pre>标签）|nowrap（文本不换行，直到遇到<br />标签）|pre-wrap（保留空白并正常换行）|pre-line（合并空白并换行）|inherit（继承）；

二、多行文本

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box; //将对象作为弹性伸缩盒子模型显示 。
-webkit-line-clamp: 2; //用来限制在一个块元素显示的文本的行数
-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式 。