僞元素能作好多事

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: '...';
      }
    }
  }