多选固定高度

Question

正如您在 jsfiddle bellow 上看到的，我正在使用一个名为 Vue Multiselect 的 vue 组件。

当多选的文本大于其宽度时，多选的高度会增加以适应文本。

我想在不增加高度和宽度的情况下将它保持在一行中。

https://jsfiddle.net/uweL9zap/1/

HTML：

<div id="app">
  <multiselect 
    v-model="value" 
    :options="options"
    track-by="library"
    :custom-label="customLabel"
    :option-height="50"
    >
  </multiselect>
</div>

JS：

new Vue({
    components: {
    Multiselect: window.VueMultiselect.default
    },
    data: {
    value: { language: 'JavaScript teste teste teste', library: 'Vue-Multiselect' },
    options: [
        {   language: 'JavaScript teste teste teste', library: 'Vue.js' },
      { language: 'JavaScript teste teste teste', library: 'Vue-Multiselect' },
      { language: 'JavaScript teste teste teste', library: 'Vuelidate' }
    ]
    },
  methods: {
    customLabel (option) {
      return `${option.library} - ${option.language}`
    }
  }
}).$mount('#app')

CSS：

* {
  font-family: 'Lato', 'Avenir', sans-serif;
}

.multiselect {
  width: 300px;
}

Answer 1

如果您只是想剪切文本，可以添加以下内容css：

.multiselect__single {
  white-space: nowrap;
  overflow: hidden; 
}

white-space: nowrap将避免换行并overflow: hidden只隐藏重叠的文本。select的wdith和height将保持与以前相同。

在这里你可以看到它的实际效果：https : //jsfiddle.net/f7at84y6/