文本多行省略号（CSS最优方案）

Float定位溢出隐藏

优点：

• 纯CSS实现，性能好，不用js调优
• 兼容性高
• 多行省略，自动显示

缺点：

• 单词截断

代码如下：

<div class="ellipses-div">
  <span class="ellipses-text">这是一段test字段，秋水共长天一色，落霞与孤鹜齐飞。这是一段test字段，秋水共长天一色，落霞与孤鹜齐飞。这是一段test字段，秋水共长天一色，落霞与孤鹜齐飞。这是一段test字段，秋水共长天一色，落霞与孤鹜齐飞。</span>
</div>

 

.ellipses-div{
  line-height: 20px;
  max-height: 40px;
  overflow: hidden;
  width: 300px;

  &:before {
    float: left;
    content: '';
    height: 40px;
    width: 22px
  }
  .ellipses-text{
    float: right;
    width: 100%;
    margin-left: -22px;
    // word-break: break-all;
  }
  &:after {
    float: right;
    content: '...';
    width: 22px;
    height: 20px;
    position: relative;
    left: 100%;
    transform: translate(-100%, -100%);
    padding-left: 8px;
  }

}

 

原理：

• 首先在父元素DIV里面设置三个float定位的元素，Ａ（偏移伪元素）, B（包裹text的元素）, C（省略号元素）。
• Ａ设置成左浮动，Ｂ，Ｃ设置右浮动，且Ｂ元素设置margin-left为负值，宽度100%,　使Ａ，Ｂ重叠。
• 当Ｂ元素超过设置的行数或者高度时，Ｃ元素另起一行左侧显示，配合绝对定位，使Ｃ元素定位到父元素DIV的右下角位置。
• 当Ｂ元素没有超过设置的行数或者高度时，由于Ｃ元素绝对定位，肯定已经偏移出父元素DIV，自然不会显示了。