利用css实现文本的单行溢出省略和多行溢出省略

如何利用css实现文本的单行溢出省略和多行溢出省略，下面编程教程网小编给大家详细介绍一下具体实现代码！

单行溢出省略

div {
  width:300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

多行溢出省略

//按照行数省略
div {
  width:300px;
  display:-webkit-box;
  text-overflow:ellipsis;
  -webkit-line-clamp:2; /*控制行数*/
  /*! autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

//按高度省略
div {
  position: relative;
  width:300px;
  max-height: 40px;
  overflow: hidden;
  line-height: 20px;
}

div::after {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}

以上是编程学习网小编为您介绍的“利用css实现文本的单行溢出省略和多行溢出省略”的全面内容，想了解更多关于 前端知识 内容，请继续关注编程基础学习网。