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; }