码迷,mamicode.com
首页 > Web开发 > 详细

文本多行省略号(CSS最优方案)

时间:2020-05-18 19:03:14      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:lips   idt   超过   兼容   pre   绝对定位   span   位置   text   

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定位的元素,A(偏移伪元素), B(包裹text的元素), C(省略号元素)。
  • A设置成左浮动,B,C设置右浮动,且B元素设置margin-left为负值,宽度100%, 使A,B重叠。
  • 当B元素超过设置的行数或者高度时,C元素另起一行左侧显示,配合绝对定位,使C元素定位到父元素DIV的右下角位置。
  • 当B元素没有超过设置的行数或者高度时,由于C元素绝对定位,肯定已经偏移出父元素DIV,自然不会显示了。

文本多行省略号(CSS最优方案)

标签:lips   idt   超过   兼容   pre   绝对定位   span   位置   text   

原文地址:https://www.cnblogs.com/yinghuochongfighter/p/12912030.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!