css多行文字溢出打点

版权声明：原创文章，如想转载，请注明原文网址，注明出处；否则，禁止转载；谢谢配合！ https://blog.csdn.net/c_kite/article/details/81486953

效果

单行文字溢出打点

多行文字溢出打点

代码

单行文字溢出打点

    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 这个是封装好的多行溢出打点库, 原理就是就是上面的代码示例.

附上一张兼容性