应用背景: 项目需求一个选择器可以输入创建条目
实现方式: 选择elment ui官网提供的创建条目选择器
发生的问题: 当创建条目过长时,会出现内容溢出的情况,如下图
解决办法: 修改选择器的CSS样式
<style>
.el-select__tags-text {
display: inline-block;
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.el-select .el-tag__close.el-icon-close {
top: -7px;
}
</style>
解决后的效果:
温馨提示: 修改CSS的样式时,要把style标签上的scoped去掉,原因有二。
1.避免与通用样式冲突
2.样式可能不生效