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:140px;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; }