偽元素能做好多事

CKJOKER 發(fā)布于2019-08-30 15:43 / 576人閱讀

摘要：但是我們總不能把圖標(biāo)和字一起擺出來(lái)，所以我們使用偽元素加上字后，將字的調(diào)為字就不顯示啦真的是好用又方便我是文字圖標(biāo)超長(zhǎng)文字的省略號(hào)開(kāi)發(fā)過(guò)程中，尤其是表格中經(jīng)常會(huì)有這樣的需求，文本超多一定長(zhǎng)度要隱藏掉，后面跟上三個(gè)點(diǎn)表示未完待續(xù)。。。

1.圖標(biāo)和文字不對(duì)齊

我們經(jīng)常遇到圖標(biāo)和文字挨著，不管圖標(biāo)怎么調(diào)都很難與文字和諧共處一行，很難實(shí)現(xiàn)垂直對(duì)齊。這個(gè)古老的話題有挺多解決方式的，很多人借助復(fù)雜的position: absolute硬調(diào)，挺麻煩的，還要寫很多代碼，不過(guò)使用偽元素的話，幾行就可以搞定啦！

其實(shí)本質(zhì)上我們的圖標(biāo)是被用作背景顯示出來(lái)的，那么不妨試試在圖標(biāo)的地方放上文本是不是就與其他的對(duì)齊了呢，回答是yes。但是我們總不能把圖標(biāo)和字一起擺出來(lái)，所以我們使用偽元素加上字后，將字的font-size調(diào)為0字就不顯示啦！真的是好用又方便！


我是文字

// css
.logo {
    width: 16px;
    height:16px;
    background: url(~"@/assets/logo/logo1.svg")
    &::after {
        content: "圖標(biāo)";
        font-size: 0px;
    }
}

2.超長(zhǎng)文字的省略號(hào)

開(kāi)發(fā)過(guò)程中，尤其是表格中經(jīng)常會(huì)有這樣的需求，文本超多一定長(zhǎng)度要隱藏掉，后面跟上’...‘三個(gè)點(diǎn)表示未完待續(xù)。。。很多現(xiàn)成的組件已經(jīng)能夠完成這樣的需求了。但是有時(shí)產(chǎn)品童鞋會(huì)提出一些尷尬的需求是現(xiàn)成組件實(shí)現(xiàn)不了的，沒(méi)辦法，只能靠我們親自操刀寫組件。。比如這次的轉(zhuǎn)置的表格。。。

so不多說(shuō)上代碼


    
                        
            {{data}}

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