Question

正如您在jsfiddle波纹管上看到的那样，我正在使用名为Vue Multiselect的Vue组件。

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

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

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仅隐藏重叠的文本。所选内容的wdith和height与以前一样。

在这里您可以看到它的运行情况：https://jsfiddle.net/f7at84y6/

多项选择的固定高度

1 个答案: