想要控制文本长度?
想要文本超出隐藏?
还想要不用JavaScript实现?
让我们来用css试试吧~
本文重点
css控制文本超出省略。完成单行、两行、多行的效果
注意点
本文提到的方法 都需要控制元素width的大小
单行省略:
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
两行省略:
word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; /* 超出几行省略 */overflow: hidden;
多行省略:
word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; /* 超出几行省略 */overflow: hidden;