Html 多选上的固定高度

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

当multiselect的文本大于其宽度时，multiselect的高度将增加以适合文本

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

HTML:

CSS:

---

如果只想剪切文本，可以添加以下

css

：

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

white space:nowrap

将避免换行，而

overflow:hidden

仅隐藏重叠文本。选择的

wdith

和

height

将保持与以前相同

在这里，您可以看到它的作用：

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')

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

.multiselect {
  width: 300px;
}

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