单行文本:
.box{width: 200px;background-color: aqua;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}
多行文本
1.利用-webkit-line-clamp属性
.box{width: 200px;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;border:solid 1px black;
}缺点:仅适用于webkit内核或移动端页面。在火狐,ie等浏览器并不支持。
2.用伪元素模拟实现
设定固定宽高,多余部分隐藏,在结尾用包含省略号(…)的元素覆盖部分内容。
这里用一个包含了省略号,且背景色为白色的伪元素遮盖了部分内容。高度height 是行高 line-height 的三倍。需要显示几行文字就设置为几倍。
.box{position:relative;line-height:1.4em;height:4.2em;overflow:hidden;
}.box::after {content:"...";font-weight:bold;position:absolute;bottom:0;right:0;padding:0 -20px 1px 45px;background-color:white;
}