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

你的名字 2022-11-19 04:28 220阅读 0赞

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

第一种方法呢就是改变下拉框的宽度，但是，如果对下拉框宽度有限制，只能改变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>

修改后效果：  
![在这里插入图片描述][20210414163956338.png]

相关：[vue style样式中scoped无效解决方案][vue style_scoped]

[20210414163405110.png]: /images/20221022/c6c3834de27e4b34b701a950ad1c84dd.png
[20210414164330569.png]: /images/20221022/a74a1ea0e41049758a0f0bd0c5ae35bc.png
[20210414163956338.png]: /images/20221022/21ec73223aad4169980dcec3b0b4b091.png
[vue style_scoped]: https://blog.csdn.net/weixin_42989576/article/details/108018191

发表评论取消回复

表情：

评论列表（有 0 条评论，220人围观）

还没有评论，来说两句吧...

相关阅读

相关 element select修改样式选择器修改样式

.el-input\_\_inner 未改 ![在这里插入图片描述][20210115094452204.png] 改后 ![在这里插入图片描述][waterma

╰+攻爆jí腚メ/ 2023年01月04日 13:21/ 0 赞/ 299 阅读

相关设置span宽度

span自身是个行内元素，不设宽度的，如果要自适应宽度，首先要将行内元素设置为块级元素 span { background-color:fc0; d

川长思鸟来/ 2022年12月27日 01:24/ 0 赞/ 167 阅读

相关修改Element UI默认样式

方法一：去掉scoped 方法二: 不去掉scoped，类名前使用/deep/ /deep/.el-timeline-item__node { bac

不念不忘少年蓝@/ 2022年12月26日 08:20/ 0 赞/ 278 阅读

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

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

你的名字/ 2022年11月19日 04:28/ 0 赞/ 221 阅读

相关 html 获取select选中的文本,JS获取select的选中值和选中文本text

var obj = document.getElementByIdx\_x(”select\_id”); //selectid var index = obj.selecte

╰半橙微兮°/ 2022年10月06日 13:54/ 0 赞/ 233 阅读

相关 element ui 输入框和Select选择器样式修改

1.输入框样式 ::v-deep .el-input__inner { border: 0; font-size: 24px;

偏执的太偏执、/ 2022年09月01日 08:53/ 0 赞/ 298 阅读

相关 ie下select默认样式修改

chrome下浏览： ![Center][] IE和FF下浏览： ![20150729202139531][] 使用select做下拉菜单，使用a

我不是女神ヾ/ 2022年08月03日 03:08/ 0 赞/ 217 阅读

相关自己修改select的样式（修改select右边的小三角）

CSS就可以解决，原理是将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。 \[html\] [view plain][] [copy][

电玩女神/ 2022年06月04日 05:15/ 0 赞/ 205 阅读

相关如何修改element.style样式

相信很多朋友在修改主题css时遇到过一些问题，比如说出现这个elememt.style，这个有时候无法直接修改，因为找不到。因此可以通过css中的 !important

短命女/ 2022年05月16日 13:47/ 0 赞/ 301 阅读

相关修改element.style内联样式

　　我们在写前面web页面样式的时候，会发现有些时候，我们怎么修改style里面的值，页面上的样式都不会修改，当你用工具查看时，会发现里面会有element.style的...

朱雀/ 2021年01月27日 07:00/ 0 赞/ 822 阅读