css 多行溢出显示省略号

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

1 常规的处理方法

<style>
    .wrap {
       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 {
       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;
        1em;
        height:1em;
        position:absolute;
        display:inline;
        right:0;
        margin-top:0.5em;
        z-index:1
    }
</style>
<body>
    <div class="wrap">
      元宵来临，重大新闻，大家准备好祝福语了吗?下面是小编为大家整理的元宵节祝福语，欢迎大家阅读。1.
      张灯结彩龙狮闹，团圆欢乐一家好，家庭事业火红照，
      友情亲情绕，平安健康都来到，真情滋润好运交，元宵节的吉祥一路抛，洒下前程更
    </div>
</body>

css 多行溢出显示省略号

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

1 常规的处理方法

2 利用伪元素巧妙解决

总结：没有溢出的时候，before伪元素一直在文本模块的右下角，但是上面盖着 after 伪元素，所以视觉上看不到省略号。当文本溢出的时候，遮盖省略号的 after 元素就会被挤下去。这时候before元素就露出来了。

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