css/js文本超出固定行数显示省略号的三种方式

1. display box布局（只支持webkit内核的浏览器）

div {
  display: -webkit-box; // 指定位块容器
  -webkit-line-clamp: 2; // 指定行数
  -webkit-box-orient: vertical; // 垂直方向
  overflow: hidden;
}

备注：

• 带有-webkit这样内核前缀的css属性，都是不规范的属性。

2. 浮动布局 （推荐）

.box {
  height: 100px;
  line-height: 25px;
  text-align: justify;
  overflow: hidden;
}

.box:before {
  float: left;
  width: 1em;
  height: 100%;
  content: "";
}

.box:after {
  margin-left: -2.5em;
  padding-right: 1em;
  float: right;
  width: 2.5em;
  height: 25px;

  content: "...";
  text-align: right;

  position: relative;
  top: -25px;
  left: 100%;

  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    white 50%,
    white
  );
}

.text {
  float: right;
  margin-left: -1em;
  width: 100%;
}

<div class="box">
  <span class="text">
    超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容超出内容
  </span>
</div>

优点：

• 原生属性支持，兼容性好。

备注：

• 这种方式，需要关注浮动特性、动态文本高度、以及相对偏移这三个方面。
• 随着动态文本高度的变动，省略号...的position: relative;属性发挥了作用，如果没有超过固定高度100px，那么它的偏移量是100%的父级宽度，在overflow: hidden;下它会定位在父级右边100%距离的位置（所以不会出现在文本中）
• 当动态文本高度炒股固定高度100px，则多的文本会继续向下排列（但是因为overflow: hidden;多的文本会隐藏掉），而省略号...因为这些向下排列的文本，而将这100%父级宽度的偏移量给抵消了，所以便会布局于父级元素的右下角。
• margin、padding偏移量，这个是你对省略号的宽度定义，也即边距偏移量。

3. js计算（较为推荐）

备注：

• 首先累加文本字符输出，渲染到页面，直到超出父级高度，拿到满载长度。
• 将末尾字符替换为...

优化点：

• 先隐藏文本元素visiblity: hidden;，然后在计算完成后，再去show。

弊端：

• 如果需要处理的地方过多，代码的重复性、冗余度将会增加。

借鉴文章
CSS 实现多行文本“展开收起”