526互联

CSS实现单行、多行文本溢出显示省略号

发布时间 2023-05-05 18:31:26作者: ministep88

代码

单行文字溢出打点

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

多行文字溢出打点

    div {
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3; //行数
          -webkit-box-orient: vertical;
    }

ps: https://github.com/josephschmitt/Clamp.js 这个是封装好的多行溢出打点库, 原理就是就是上面的代码示例.

 

[css多行文字溢出打点_刘翾的博客-CSDN博客](https://blog.csdn.net/c_kite/article/details/81486953)

[CSS实现单行、多行文本溢出显示省略号 - 掘金](https://juejin.cn/post/6915752928691126279)

[CSS单行、多行文本溢出显示省略号 - 个人文章 - SegmentFault 思否](https://segmentfault.com/a/1190000009262433)