伪元素能作好多事

1.图标和文字不对齐

咱们常常遇到图标和文字挨着，无论图标怎么调都很难与文字和谐共处一行，很难实现垂直对齐。这个古老的话题有挺多解决方式的，不少人借助复杂的position: absolute硬调，挺麻烦的，还要写不少代码，不过使用伪元素的话，几行就能够搞定啦！

其实本质上咱们的图标是被用做背景显示出来的，那么不妨试试在图标的地方放上文本是否是就与其余的对齐了呢，回答是yes。可是咱们总不能把图标和字一块儿摆出来，因此咱们使用伪元素加上字后，将字的font-size调为0字就不显示啦！真的是好用又方便！

<span class=logo></span>
<span>我是文字</span>

// css
.logo {
    width: 16px;
    height:16px;
    background: url(~"@/assets/logo/logo1.svg")
    &::after {
        content: '图标';
        font-size: 0px;
    }
}

2.超长文字的省略号

开发过程当中，尤为是表格中常常会有这样的需求，文本超多必定长度要隐藏掉，后面跟上’...‘三个点表示未完待续。。。不少现成的组件已经可以完成这样的需求了。可是有时产品童鞋会提出一些尴尬的需求是现成组件实现不了的，没办法，只能靠咱们亲自操刀写组件。。好比此次的转置的表格。。。

so很少说上代码

<td>
    <el-tooltip :content="data" :disabled="!hideMore" placement="top">
        <span ref="tdRef" class="tb-span" :class="{'hide-more': hideMore}">                
            {{data}}
        </span>
    </el-tooltip>
</td>

props: {
  data: ''
},
data() {
  return {
    hideMore: false
  }
},
mounted() {
  this.hideMore = this.$refs.tdRef.offsetHeight > 22
}

.tb-span {
    &.hide-more {
      padding-right: 20px;
      position: relative;
      display: inline-block;
      height: 18px;
      line-height: 22px;
      width: 100%;
      overflow: hidden;
      &::after {
        position: absolute;
        width: 3em;
        right: 12px;
        top: 0;
        z-index: 5;
        background: linear-gradient(90deg,transparent,#fff,#fff,#fff);
        text-align: center;
        content: '...';
      }
    }
  }