資訊專欄INFORMATION COLUMN
摘要：但是我們總不能把圖標(biāo)和字一起擺出來，所以我們使用偽元素加上字后，將字的調(diào)為字就不顯示啦真的是好用又方便我是文字圖標(biāo)超長文字的省略號開發(fā)過程中，尤其是表格中經(jīng)常會有這樣的需求，文本超多一定長度要隱藏掉，后面跟上三個點(diǎn)表示未完待續(xù)。。。
1.圖標(biāo)和文字不對齊
我們經(jīng)常遇到圖標(biāo)和文字挨著，不管圖標(biāo)怎么調(diào)都很難與文字和諧共處一行，很難實(shí)現(xiàn)垂直對齊。這個古老的話題有挺多解決方式的，很多人借助復(fù)雜的position: absolute硬調(diào)，挺麻煩的，還要寫很多代碼，不過使用偽元素的話，幾行就可以搞定啦！
其實(shí)本質(zhì)上我們的圖標(biāo)是被用作背景顯示出來的，那么不妨試試在圖標(biāo)的地方放上文本是不是就與其他的對齊了呢，回答是yes。但是我們總不能把圖標(biāo)和字一起擺出來，所以我們使用偽元素加上字后，將字的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.超長文字的省略號
開發(fā)過程中，尤其是表格中經(jīng)常會有這樣的需求，文本超多一定長度要隱藏掉，后面跟上’...‘三個點(diǎn)表示未完待續(xù)。。。很多現(xiàn)成的組件已經(jīng)能夠完成這樣的需求了。但是有時產(chǎn)品童鞋會提出一些尷尬的需求是現(xiàn)成組件實(shí)現(xiàn)不了的，沒辦法，只能靠我們親自操刀寫組件。。比如這次的轉(zhuǎn)置的表格。。。
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: "...";
}
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116067.html
摘要：今天在上看到了一篇介紹自動標(biāo)注工具的文章，不禁有些感慨，技術(shù)發(fā)展的如此之快。前兩月我開始接觸了公司用的藍(lán)湖，這就是一款可以自動標(biāo)注的應(yīng)用，鼠標(biāo)點(diǎn)到元素上，在右側(cè)就會彈出相關(guān)的尺寸顏色等信息，甚至還有樣式，這簡直是太棒了，大大提高了開發(fā)效率。 今天在Segmentfault上看到了一篇介紹psd自動標(biāo)注工具的文章，不禁有些感慨，技術(shù)發(fā)展的如此之快。我本身就是一個比較懶惰的人，對于頁面開發(fā)...
摘要：今天在上看到了一篇介紹自動標(biāo)注工具的文章，不禁有些感慨，技術(shù)發(fā)展的如此之快。前兩月我開始接觸了公司用的藍(lán)湖，這就是一款可以自動標(biāo)注的應(yīng)用，鼠標(biāo)點(diǎn)到元素上，在右側(cè)就會彈出相關(guān)的尺寸顏色等信息，甚至還有樣式，這簡直是太棒了，大大提高了開發(fā)效率。 今天在Segmentfault上看到了一篇介紹psd自動標(biāo)注工具的文章，不禁有些感慨，技術(shù)發(fā)展的如此之快。我本身就是一個比較懶惰的人，對于頁面開發(fā)...
摘要：今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。三動畫技術(shù)越來越不陌生，使用門檻也漸漸降低，而且動畫還可以使用控制。掃一掃查看效果打開微掃一掃關(guān)注早讀君，每天早晨為你推送前端知識，度過擠地鐵坐公交的時光 今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。 文章原出處：騰訊ISUX 開始閱讀之前你可以先掃一掃體驗demoshowImg(https://segmentfault.co...
摘要：今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。三動畫技術(shù)越來越不陌生，使用門檻也漸漸降低，而且動畫還可以使用控制。掃一掃查看效果打開微掃一掃關(guān)注早讀君，每天早晨為你推送前端知識，度過擠地鐵坐公交的時光 今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。 文章原出處：騰訊ISUX 開始閱讀之前你可以先掃一掃體驗demoshowImg(https://segmentfault.co...
閱讀 1026·2021-11-22 13:52
閱讀 941·2019-08-30 15:44
閱讀 582·2019-08-30 15:43
閱讀 2437·2019-08-30 12:52
閱讀 3486·2019-08-29 16:16
閱讀 648·2019-08-29 13:05
閱讀 2952·2019-08-26 18:36
閱讀 2007·2019-08-26 13:46
