【css】文本超出部分省略号显示（单行 & 多行）

场景： 文章标题或其他内容过长时，截断为省略号显示。

单行文本省略

.box {
      /* 溢出显示省略号 */
      max-width: 40vw;
      overflow: hidden; // 关键
      text-overflow: ellipsis; // 关键
      white-space: nowrap; // 关键
    }

最终效果：

20201211更新：多行文本省略

仅webkit浏览器支持

.box {
    width: 400px; 
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

参考：
关于文字内容溢出用点点点(…)省略号表示