共计 1120 个字符，预计需要花费 3 分钟才能阅读完成。
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: ‘…’;
}
}
}
