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

你的名字 2022-11-19 04:28 285阅读 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 条评论，285人围观）

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

相关阅读

相关 element-plus修改select下拉选择框样式

element-plus修改select下拉选择框样式如图所示修改placeholder的颜色修改下拉样式如图所示 ![在这里插入图片描

快来打我*/ 2024年03月23日 13:17/ 0 赞/ 65 阅读

相关【CSS】span标签设置宽度

前言我们都知道HTML中的span标签是行内标签，行内标签是无法设置高度和宽度的，但是就是需要给span设置宽度，应该怎么处理呢？ display 首先

朴灿烈づ我的快乐病毒、/ 2023年06月18日 04:58/ 0 赞/ 36 阅读

相关 span做成按钮时，文字不被选中样式

今天用span做成按钮，但是每次双击都会选中span内容，很不和谐。怎么办呢？添加下面样式即可，亲测ie和谷歌浏览器没问题： .button {

ゝ一纸荒年。/ 2023年06月06日 08:23/ 0 赞/ 24 阅读

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

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

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

相关设置span宽度

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

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

相关修改Element UI默认样式

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

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

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

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

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

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

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

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

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

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

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

相关如何修改element.style样式

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

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