偽元素能做好多事

CKJOKER 發布于2019-08-30 15:43 / 569人閱讀

摘要：但是我們總不能把圖標和字一起擺出來，所以我們使用偽元素加上字后，將字的調為字就不顯示啦真的是好用又方便我是文字圖標超長文字的省略號開發過程中，尤其是表格中經常會有這樣的需求，文本超多一定長度要隱藏掉，后面跟上三個點表示未完待續。。。

1.圖標和文字不對齊

我們經常遇到圖標和文字挨著，不管圖標怎么調都很難與文字和諧共處一行，很難實現垂直對齊。這個古老的話題有挺多解決方式的，很多人借助復雜的position: absolute硬調，挺麻煩的，還要寫很多代碼，不過使用偽元素的話，幾行就可以搞定啦！

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


我是文字

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

2.超長文字的省略號

開發過程中，尤其是表格中經常會有這樣的需求，文本超多一定長度要隱藏掉，后面跟上’...‘三個點表示未完待續。。。很多現成的組件已經能夠完成這樣的需求了。但是有時產品童鞋會提出一些尷尬的需求是現成組件實現不了的，沒辦法，只能靠我們親自操刀寫組件。。比如這次的轉置的表格。。。

so不多說上代碼


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

云服務器 GPU云服務器偽元素獲取偽元素如何做好網站優化如何做好郵件營銷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116067.html

“標準”讓AI的腳步更快

摘要：今天在上看到了一篇介紹自動標注工具的文章，不禁有些感慨，技術發展的如此之快。前兩月我開始接觸了公司用的藍湖，這就是一款可以自動標注的應用，鼠標點到元素上，在右側就會彈出相關的尺寸顏色等信息，甚至還有樣式，這簡直是太棒了，大大提高了開發效率。今天在Segmentfault上看到了一篇介紹psd自動標注工具的文章，不禁有些感慨，技術發展的如此之快。我本身就是一個比較懶惰的人，對于頁面開發...

libxd 2019-08-02 11:45 評論0 收藏0
“標準”讓AI的腳步更快

摘要：今天在上看到了一篇介紹自動標注工具的文章，不禁有些感慨，技術發展的如此之快。前兩月我開始接觸了公司用的藍湖，這就是一款可以自動標注的應用，鼠標點到元素上，在右側就會彈出相關的尺寸顏色等信息，甚至還有樣式，這簡直是太棒了，大大提高了開發效率。今天在Segmentfault上看到了一篇介紹psd自動標注工具的文章，不禁有些感慨，技術發展的如此之快。我本身就是一個比較懶惰的人，對于頁面開發...

魏明 2019-06-26 18:36 評論0 收藏0
「前端早讀君006」移動開發必備：那些玩轉H5的小技巧

摘要：今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。三動畫技術越來越不陌生，使用門檻也漸漸降低，而且動畫還可以使用控制。掃一掃查看效果打開微掃一掃關注早讀君，每天早晨為你推送前端知識，度過擠地鐵坐公交的時光今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。文章原出處：騰訊ISUX 開始閱讀之前你可以先掃一掃體驗demoshowImg(https://segmentfault.co...

LittleLiByte 2019-08-30 15:55 評論0 收藏0
「前端早讀君006」移動開發必備：那些玩轉H5的小技巧

摘要：今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。三動畫技術越來越不陌生，使用門檻也漸漸降低，而且動畫還可以使用控制。掃一掃查看效果打開微掃一掃關注早讀君，每天早晨為你推送前端知識，度過擠地鐵坐公交的時光今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。文章原出處：騰訊ISUX 開始閱讀之前你可以先掃一掃體驗demoshowImg(https://segmentfault.co...

liuyix 2019-08-23 14:23 評論0 收藏0