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

体贴的柳树

发布于
10 月 31 日山东

陟上晴明

21.1k124691

更新于
11 月 1 日

新手上路，请多包涵

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

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

<!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

阅读 1k

AI 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` 在多选且可搜索状态下，标签将不会换行，而是显示为省略号形式，避免撑开页面。

3 个回答

得票最新

sunw

462

发布于
10 月 31 日江苏

重构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;
  }
}

坚韧的充值卡

发布于
11 月 21 日陕西

新手上路，请多包涵

<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%;
    }
}

这样就好了

Seven

623116

发布于
11 月 21 日广东

更新于
11 月 21 日

我在你原来代码基础上做了修改

以下是完整代码

<!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>
    <style>
      .my-select {
        --el-select-height: 40px;
        height: 40px !important;
      }
      .my-select .el-select__wrapper {
        height: 40px !important;
        max-height: 40px !important;
        padding-bottom: 0 !important;
        align-items: center !important;
      }
      .my-select .el-select__tags {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        max-height: 30px !important;
        padding-bottom: 2px !important;
        padding-right: 20px !important;
      }
      .my-select .el-select__tags .el-tag {
        flex-shrink: 0;
        margin-right: 4px;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: 22px !important;
        line-height: 22px !important;
      }
      /* 隐藏滚动条，但保留滚动功能 */
      .my-select .el-select__tags::-webkit-scrollbar {
        display: none;
      }
      /* 调整输入框光标位置 - 默认状态 */
      .my-select .el-select__wrapper .el-select__input-wrapper {
        position: absolute !important;
        bottom: 50% !important;
        transform: translateY(50%) !important;
      }
      /* 展开时的输入框位置微调 */
      .my-select.el-select--multiple.el-select--default .el-select__wrapper .el-select__input-wrapper {
        bottom: 50% !important;
        transform: translateY(50%) !important;
      }
    </style>
  </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>
  </body>
</html>

`主要添加了自定义样式`

.my-select {
  --el-select-height: 40px;
  height: 40px !important;
}
.my-select .el-select__wrapper {
  height: 40px !important;
  max-height: 40px !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}
.my-select .el-select__tags {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  max-height: 30px !important;
  padding-bottom: 2px !important;
  padding-right: 20px !important;
}
.my-select .el-select__tags .el-tag {
  flex-shrink: 0;
  margin-right: 4px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 22px !important;
  line-height: 22px !important;
}
.my-select .el-select__tags::-webkit-scrollbar {
  display: none;
}
.my-select .el-select__wrapper .el-select__input-wrapper {
  position: absolute !important;
  bottom: 50% !important;
  transform: translateY(50%) !important;
}
.my-select.el-select--multiple.el-select--default .el-select__wrapper .el-select__input-wrapper {
  bottom: 50% !important;
  transform: translateY(50%) !important;
}

效果图

查看全部 3 个回答

推荐问题

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

我在你原来代码基础上做了修改

`主要添加了自定义样式`

效果图

el-select下拉框实现复选框多选、全选？

vue3+vite+electron+element-plus在el-form中使用el-input，为什么el-input获取到焦点之后只能输入一个字符？

在vue3中没报错，但是该显示的组件没有显示？

如何在hover或点击行时保持row-class-name样式？

Element-plus中el-Drawer挂载指定元素后依然fixed？

vue渲染函数中如何设置v-model的值?

html引入element plus出现表格错乱？