文字省略大致分为单行省略加省略号,多行省略加省略号:
首先是单行省略,主要思想就是1.不换行 2.超出部分隐藏 3.加省略号
/* 单行文字 */
.p1{
width: 100%;
line-height: center;
border-bottom: 1px solid #000;
/* 让文字在一行显示,不换行*/
white-space: nowrap;
/* 文本超出部分隐藏 */
overflow: hidden;
/* 超出部分添加省略号*/
text-overflow: ellipsis;
}
其次是多行省略 ,主要思想是:1.将盒子变为弹性伸缩的盒子 2.超出隐藏 3.限制文本显示的行数(根据个人实际情况定行数) 4.设置盒子的排序方式 5.加省略号
/* 多行文字 */
.p2{
width: 100%;
border-bottom: 1px solid #000;
/* 将p2这个对象作为一个弹性伸缩的盒子模型 */
display: -webkit-box;
/* 文本超出部分隐藏 */
overflow: hidden;
/* 限制块级元素内文本显示的行数 */
-webkit-line-clamp: 3;
/* 设置盒子内子元素的排列方式 */
-webkit-box-orient: vertical;
/* 超出部分添加省略号 */
text-overflow: ellipsis;
}
