css控制文本超出省略（单行、两行、多行）

想要控制文本长度？

想要文本超出隐藏？

还想要不用JavaScript实现？

让我们来用css试试吧~

本文重点

css控制文本超出省略。完成单行、两行、多行的效果

注意点

本文提到的方法 都需要控制元素width的大小

单行省略：

代码语言：txt复制

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

两行省略：

代码语言：txt复制

  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 超出几行省略 */
  overflow: hidden;

多行省略：

代码语言：txt复制

  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 超出几行省略 */
  overflow: hidden;

css

0 人点赞