2022-09-19CSS00
请注意,本文编写于 580 天前,最后修改于 580 天前,其中某些信息可能已经过时。

如何实现单行/多行文本溢出的省略(...)?

/*单行文本溢出*/
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*多行文本溢出*/
p {
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高,比如这里我们显示两行,则为3*/
  height: 3em;
  overflow: hidden;
}

p:after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

详细资料可以参考: 《【CSS/JS】如何实现单行/多行文本溢出的省略》 《CSS 多行文本溢出省略显示》

本文作者:前端小毛

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!