css多行文字溢出打点

效果

单行文字溢出打点

多行文字溢出打点

代码

单行文字溢出打点

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

附上一张兼容性