兼容IE的超出两行隐藏带省略号,纯css

1,703 阅读1分钟
<div v-for="(item,index) in list" :key="index1" :title="item">
   <div v-html="item" class="text"></div>
</div>

高70的一个两行数据 css:

div {
    overflow: hidden;
    height: 70px;
 }
 div .text {
    float: right;
    margin-left: -5px;
    width: 100%;
    word-break: break-all;
  }
div::before {
   float: left;
   width: 5px;
   content: '';
   height: 60px;
}
div::after {
    float: right;
    content: '...';
    height: 60px;
    line-height: 30px;
    padding-right: 5px;
    text-align: right;
    width: 3em;
    margin-left: -3em;
    position: relative;
    left: 100%;
    top: -30px;
    padding-right: 5px;
    /* 显示更好的效果 */
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        from(rgba(255, 255, 255, 0)),
        to(white),
        color-stop(50%, white)
    );
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    }
    ```
    效果:
    
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/9/16ee950be9328a36~tplv-t2oaga2asx-image.image)