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