css:文本溢出隐藏省略显示

1. 单行：

.text { 
    width: 100px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

• white-space属性用来设置如何处理元素中的空白。

• overflow属性定义当一个元素的内容太大而无法适应时，块级格式化上下文如何处理。它是 overflow-x 和 overflow-y的简写属性 。

• text-overflow属性 确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（'...'）或显示一个自定义字符串。

2.多行：

.text {
    width: 100px;
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
}

• 多行文本主要是把white-space属性修改为使用-webkit-line-clamp，限制在一个块元素显示的文本的行数来实现的。

• display: -webkit-box 设置div为弹性伸缩盒子模型。

• -webkit-line-clamp可以把块容器中的内容限制为指定的行数。它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient属性设置成 vertical 时才有效果。

• -webkit-box-orient用来设置一个元素是水平还是垂直布局其内容。该特性是非标准的，使用时需要注意兼容性。

作者：那些年丶ny
链接：juejin.cn/post/697030…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。