css 多行溢出显示省略号

记录下看到的一个CSS巧用,非常 有意思。

1 常规的处理方法

<style>
    .wrap {
      width: 40vw;
      border: 1px solid red;
      font-size:large;
      overflow:hidden;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:4
    }
</style>
<body>
    <div class="wrap">
      元宵来临,重大新闻,大家准备好祝福语了吗?下面是小编为大家整理的元宵节祝福语,欢迎大家阅读。1.
      张灯结彩龙狮闹,团圆欢乐一家好,家庭事业火红照,
      友情亲情绕,平安健康都来到,真情滋润好运交,元宵节的吉祥一路抛,洒下前程更
    </div>
</body>

2 利用伪元素巧妙解决

<style>
    .wrap {
      width: 40vw;
      border: 1px solid red;
      max-height:90px;
      overflow:hidden;
      position:relative;
      padding-right:1em;
      text-align:justify;
    }
    .wrap::before{
        content:'...';
        position:absolute;
        right:0;
        bottom:0;
    }
    .wrap::after{
        content:'';
        background:#fff;
        width:1em;
        height:1em;
        position:absolute;
        display:inline;
        right:0;
        margin-top:0.5em;
        z-index:1
    }
</style>
<body>
    <div class="wrap">
      元宵来临,重大新闻,大家准备好祝福语了吗?下面是小编为大家整理的元宵节祝福语,欢迎大家阅读。1.
      张灯结彩龙狮闹,团圆欢乐一家好,家庭事业火红照,
      友情亲情绕,平安健康都来到,真情滋润好运交,元宵节的吉祥一路抛,洒下前程更
    </div>
</body>
总结:没有溢出的时候,before伪元素一直在文本模块的右下角,但是上面盖着 after 伪元素,所以视觉上看不到省略号。当文本溢出的时候,遮盖省略号的 after 元素就会被挤下去。这时候before元素就露出来了。
上一篇:Flex 布局理解


下一篇:css3 flex 详解,可以实现div内容水平垂直居中