element select多选框内及下拉文字过多溢出问题

 

<el-select
            v-model="form.name"
            placeholder="请选择问题类别"
            multiple
            collapse-tags
            style="width: 500px"
            clearable
            class="tags_select_input"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) of names"
              :key="index"
            >　　

　　　　　　　　　　　<!-- 单行文字溢出显示省略号 -->

　　　　　　　　　　　<div style="width:300px;overflow:hidden;text-overflow: ellipsis;display:inline-block">{{item.name}}</div>

　　　　　　　　　　　<!-- 当下拉多选时如果不加上display:inline-block,选中当前下拉时后面选中那个“√”将无法显示 -->

　　　　　　　　　　　<!-- 单行情况下如果文字换行显示，并未隐藏，需加上：white-space: nowrap; -->

　　　　　　　　　　<!-- 多行行文字溢出显示省略号需加上：display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 4; -->

　　　　　　　　　　<!-- 溢出文字隐藏后将无法查看文本全部内容，此时可以使用el-tooltip组件 -->
　　　　　　　　　　<!-- 还有个问题就是虽然这溢出的文本隐藏了，并且现在鼠标指上去也能看见全部内容了，但是现在就算鼠标指到“未溢出的文本”也会有这个效果(这不是我想要的效果)，所以加了个v-if来控制 -->
　　　　　　　　　　<!-- v-if的长度空根据下拉框的宽度来进行调整 -->
　　　　　　　　　　<el-tooltip class="item" effect="dark" :content="item.name" placement="top-start" v-if="item.name.length >= 10">
　　　　　　　　　　　　<div style="width:100%;overflow:hidden;text-overflow: ellipsis;display:inline-block">{{item.name}}</div>
　　　　　　　　　　</el-tooltip>
　　　　　　　　</el-option>

</el-select>

//选中下拉之后select中文字溢出问题
.tags_select_input /deep/ .el-select__tags {
  // height: 40px;
  white-space: nowrap;
  overflow: hidden;
  flex-wrap: nowrap;
}
.tags_select_input /deep/ .el-select__tags-text {
  display: inline-block;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tags_select_input /deep/ .el-tag__close.el-icon-close {
  top: -6px;
  right: -4px;
}

如果在el-tag中使用文字溢出隐藏实例：

<el-tag
              :style="{margin:tag.name.length >= 50?'3px 5px' : '4px 5px'}"
              v-for="tag in scope.row.projects"
              :key="tag.id"
              @close="delTag(tag,scope.row.accontId)"
              closable>
              <el-tooltip class="item" effect="dark" :content="tag.name" placement="top-start" v-if="tag.name.length >= 50">
                <div style="width:880px;overflow:hidden;text-overflow: ellipsis;display:inline-block;height:20px">{{tag.name}}</div>
              </el-tooltip>
              <span v-else>{{tag.name}}</span>
</el-tag>

其中样式调整主要设置了div高度和动态绑定了style