修改element select 选中的 span 宽度和样式

最新推荐文章于 2024-06-03 11:37:01 发布

前端搬运工

最新推荐文章于 2024-06-03 11:37:01 发布

阅读量1.4k

点赞数

分类专栏： Web开发文章标签： vue.js html elementui 前端

本文链接：https://blog.csdn.net/weixin_42989576/article/details/115702544

版权

Web开发专栏收录该内容

70 篇文章

订阅专栏

本文介绍了如何通过less样式调整Vue下拉框中过长标签的显示问题，通过设置宽度、文本溢出、white-space属性，使内容美观且适应宽度限制。涉及的技巧包括`.el-select__tags`选择器和子元素定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

题目描述的是以下样式：
在这里插入图片描述
有时候选中的值名字会很长，导致span宽度超过了下拉框，看起来很丑

第一种方法呢就是改变下拉框的宽度，但是，如果对下拉框宽度有限制，只能改变span标签的宽度。这里介绍的是后者

<style lang="less" scoped>
// container ：下拉框父类class
.container /deep/ .el-select__tags {
    .el-tag:nth-child(1) {
      width: 110px;
      padding-left: 0;
      position: relative;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      i {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -8px;
      }
    }
  }
  </style>

修改后效果：
在这里插入图片描述