When el-select multi-select sets the collapse-tags attribute and merges them into a piece of text for display, the display length exceeds the display length and is displayed with an ellipsis, and is displayed on one line.

Project scenario:

The current display is divided into two lines like this:

The desired display effect:

---

solution:

            <span class="multiple-el-select">
              <span class="search-title">计费方式</span>
              <el-select
                v-model="exampleManageParams.billingMethod"
                placeholder="请选择"
                filterable
                reserve-keyword
                clearable
                multiple
                collapse-tags
                :popper-append-to-body="false"
                :loading="isSelectGetDataLoading">
                <el-option
                  v-for="item in hasBillingMethod"
                  :key="item.paymentMethodCode"
                  :label="item.paymentMethodName"
                  :value="item.paymentMethodCode"
                  :disabled="item.disabled = exampleManageParams.billingMethod.length >=10 && !exampleManageParams.billingMethod.includes(item.paymentMethodCode)">
                  <span>{
    
    {
    
     item.paymentMethodName }}（{
    
    {
    
    item.paymentMethodCode}}）</span>
                </el-option>
              </el-select>
            </span>

When the style writing is not on one line, you can adjust the following parameters to suit your needs to change it to one line:

.multiple-el-select /deep/ .el-select .el-select__tags .el-tag {
    
    
  max-width: calc(100% - 70px) !important;
}
.multiple-el-select /deep/ .el-select__tags-text:last-child {
    
    
  width: 25px !important;
  overflow: visible !important;
}

Note: There is a small problem with the drop-down box. The selected checkmark suppresses the selected text. You can just adjust the style yourself.