css控制文本超出隐藏

版权声明：本文为博主原创文章，未经博主允许不得转载。如有转载请留言，谢谢~ https://blog.csdn.net/qq_38209578/article/details/89848766

本文主要介绍css实现文本单行和多行超出隐藏显示省略号。

一、单行超出隐藏

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

二、多行超出隐藏

.ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

将上述2改成任意数值n，即可实现n行超出隐藏