css实现文本内容超出隐藏,显示省略号
- 单行文本:强制文本不进行换行,超出部分显示省略号
.text{
width: 100%;
height: 30px;
line-height: 30px;
overflow: hidden; /*超出隐藏*/
white-space: nowrap;/*强制不换行*/
text-overflow: ellipsis;/*隐藏后超出部分以省略号显示*/
}
- 多行文本:行数、高度自定,超出部分显示省略号
.multi-line {
max-height: 80px;/* 如需固定高度,请写直接写 height: 你需要的高度; */
text-align: justify;
overflow: hidden;
text-overflow: ellipsis; /* 超出文字显示省略号 */
display: -webkit-box;
-webkit-line-clamp: 2;/* 文本行数 */
-webkit-box-orient: vertical;
}