一、单行文本超出显示...
.text {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
white-space:设置不换行,用来设置如何处理元素中的空白。
overflow:隐藏超出部分,定义当一个元素的内容太大而无法适应时,块级格式化上下文如何处理。它是overflow-x和
overflow-y的简写属性。
text-overflow:添加省略号,确定如何向用户发出未显示的溢出内容信号。它可以被剪切,显示一个省略号('...')或显示一个自定义字符串。
【注意:必须有固定宽度才会出现效果。】
二、多行文本超出显示...
.text {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
-webkit-line-clamp:限制在一个块元素显示的文本的行数,可以把块容器中的内容限制为指定的行数。它只有在display属性设置成-webkit-box或者-webkit-inline-box并且-webkit-box-orient属性设置成vertical时才有效果。
-webkit-box-orient:用来设置一个元素是水平还是垂直布局其内容。该特性是非标准的,使用时需要注意兼容性。