文本多行省略号（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，自然不会显示了。

巴特西

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

最新文章

热门文章