elementui select多选的内容单行缩略显示

Question

elementui 的select组件，多选的内容是tag样式，一行不够显示会换行显示。

我希望是单行显示，就像我只选两个标签

如果标签较多，我希望还是单行显示，可以是以缩略的形式显示，就是点点点的形式显示，多余的标签可以隐藏，始终保持着输入框的高度不变，不会换行就好。
因为换行会影像整理表单的美观。

我查阅了好多 都没有发现方法，感觉是tag样式的问题

还看到里面是span 就像用float：left和display：inline或者inline-block 都尝试了 都不行。
希望大神指教！！！

Answer 1

手机回答请体谅，spam标签去掉浮动样式，再让其行内样式，省略号样式应该知道吧
不好意思，前面回答浪费了时间，还是要自己动手才知道是什么问题，省略号样式只对文本有效果，要实现你说的功能样式要写个方法来实现，临时写了个，仅供参考吧~

<style lang="less" rel="stylesheet/less" >
  .demo {
    .demo-select {
      &:after {
        content: '...';
        position: absolute;
        right: 39px;
        bottom: 5px;
      }
    }
  }
  .el-select__tags {
    max-width: 150px!important;
    overflow: hidden;
    white-space: nowrap;
  }
</style>
<template>
  <div>    
    <div class="demo">
      <el-select v-model="value5" ref="select"  @change="changeSelect" :class="{'demo-select': isMore}" multiple placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value" class="demo-option">
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
  import { Select, Option } from 'element-ui'
  export default {
    data: () => ({
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭北京烤鸭北京烤鸭北京烤鸭北京烤鸭'
      }],
      value5: [],
      isMore: false
    }),
    methods: {
      changeSelect() {
        this.$nextTick(function () {
          let [$span, tags, Len] = [this.$refs.select.$refs.tags.children[0].childNodes, [], 0];
          for (let i = 0, len = $span.length; i < len; i++) {
            if ($span[i].className.indexOf('leave') > -1) {
              tags.slice(i, 1);
            } else {
              tags.push($span[i]);
            }
          }
          for (let i = 0, len = tags.length; i < len; i++) {
            Len += tags[i].offsetWidth;
          }

          this.isMore = Len > 144 ? true : false;
        });
      }
    },
    components: {      
      ElSelect: Select,
      ElOption: Option,
    }
  }
</script>

Answer 2

提供思路：
1.限制select__tags宽度及max-height（为了判断是否超出一行）
2.每次选择选项时，变量count++
3.监听count
4.在count监听事件中：
（1）获取.el-select__tags>span的高度，与原设置的max-height相比，如大于则证明已超出单行，使用js控制添加省略号，及出现悬浮tooptips
（2）如小于或等于max-height，隐藏tooptips及省略号