zoukankan      html  css  js  c++  java
  • 文本多行省略号(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定位的元素,A(偏移伪元素), B(包裹text的元素), C(省略号元素)。
    • A设置成左浮动,B,C设置右浮动,且B元素设置margin-left为负值,宽度100%, 使A,B重叠。
    • 当B元素超过设置的行数或者高度时,C元素另起一行左侧显示,配合绝对定位,使C元素定位到父元素DIV的右下角位置。
    • 当B元素没有超过设置的行数或者高度时,由于C元素绝对定位,肯定已经偏移出父元素DIV,自然不会显示了。
  • 相关阅读:
    k8shelm
    利用TweenMax实现贝塞尔曲线运动
    flashPlayer自动降频后webgame处理技巧
    求字符串长度的好方法
    robotlegs 笔记
    pureMVC的svn地址
    完美解决as3在ie中初始化时stageWidth和stageHeight为0的问题
    God of War Ascension / 战神4, 再一次迎来新导演!
    《危情谍战 Knight and Day》又一部好电影!
    未来,突破束缚是唯一的选择?
  • 原文地址:https://www.cnblogs.com/yinghuochongfighter/p/12912030.html
Copyright © 2011-2022 走看看