问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何解决el-select多选、可搜索时自动换行撑开页面的问题？

头像
体贴的柳树
    1
    头像头饰
    陟上晴明
      21.1k124691
      新手上路，请多包涵

      el-select 多选、可搜索时，自动换行撑开页面如何解决？

      在可搜索状态下，多选后确保内容不会换行

      image.png

      <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <title>Element Plus demo</title>
  </head>
  <body>
    <div id="app">
      <el-select style="width: 150px;" class="my-select"
                     v-model="tv"
                     filterable
                     collapse-tags
                     collapse-tags-tooltip 
                     multiple
                     placeholder="输入关键字进行搜索"
          >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
      </el-select>
    </div>
    <script>
      const App = {
        data() {
          return {
            tv:'',
            message: "Hello Element Plus",
            options : [
                        {
                          value: 'Option1',
                          label: 'Option11111111111111111111',
                        },
                        {
                          value: 'Option2',
                          label: 'Option2222222222222222222',
                        },
                        {
                          value: 'Option3',
                          label: 'Option333333333333333333333',
                        },
                        {
                          value: 'Option4',
                          label: 'Option4444444444444444',
                        },
                        {
                          value: 'Option5',
                          label: 'Option5',
                        },
                      ]
          };
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </style>
    

    </body>
</html>
      多选element-plus
      阅读 878
      avatarAI BotBETA
      **解决方案**：

可以通过 CSS 样式调整 `el-select` 多选标签的显示方式，避免其自动换行撑开页面。具体可以通过设置 `.el-select-dropdown__item.selected` 的样式，使其内容不换行，并使用 `white-space: nowrap;` 和 `overflow: hidden;` 等属性来控制标签的显示。同时，可以调整 `.el-select` 的宽度或其他相关样式来适应内容。

在示例代码中，可以添加以下 CSS 样式来解决该问题：

      .my-select .el-select-dropdown__item.selected {
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-right: 4px; / 添加间距以便区分多个标签 /
      max-width: calc(100% - 16px); / 减去左右padding的值，确保标签不会超出容器宽度 /
      box-sizing: border-box;
      }

      / 如果标签过长，可以考虑设置.el-select的宽度更大一些，或者根据实际需求调整 /
      .my-select {
      width: 200px; / 根据需要调整宽度 /
      }

      
这样设置后，`el-select` 在多选且可搜索状态下，标签将不会换行，而是显示为省略号形式，避免撑开页面。
      2 个回答
      得票最新
      头像
      sunw
        462

        重构select的样式吧，element的之前写过一个，你参考一下

        // 多选且可搜索下拉框样式重置
.collapse-filterable-tags{
  .el-select__tags{
    flex-wrap: nowrap;
    overflow: auto;
    scrollbar-width: none;

    >span{
      text-align: right;
    }
    &::-webkit-scrollbar{
      width: 0px !important;
      height: 0px !important;
      display: none !important;
    }

    .el-select__input{
      min-width: 60px;
    }
  }
  .el-tag{
    font-size: 14px;
    color: rgba(0,0,0,.65)  !important;
    margin-left: 0px  !important;
    padding-left: 0px;
    padding-right: 0px;
    background: none !important;
    border: 0px;

    &::before{
      display: inline-block;
      padding: 0px 7px;
      content: '|';
      color: rgba(0, 0, 0, 0.45);
    }

    &:first-child{
      &::before{
        content: '';
      }
    }
  }
  .el-tag__close{
    display: none;
  }
}
        头像
        坚韧的充值卡
          2
          新手上路，请多包涵
          <el-select
  style="width: 192px"
  v-model="form.xxx"
  clearable
  filterable
  multiple
  collapse-tags
  collapse-tags-tooltip
  class="multiple-select"
>
  ...
</el-select>
          .multiple-select {
    .el-select__selection {
        flex-wrap: nowrap;
    }

    .el-select__selected-item:first-child {
        max-width: 50%;
        .el-tag.is-closable {
            max-width: 100% !important;
        }
    }

    .el-select__input-wrapper {
        max-width: 20%;
    }
}

          这样就好了

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏