el-form-item 裏面的內容如果不換行,如果超出使用省略號

代碼顯示:

<el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
   <el-form-item label="工程階段">
         <span class="lab-text">{{ costTypeList[rprjInfoObject.costType] }}</span>
   </el-form-item>
</el-col>

因爲是使用 el-col佈局,所以上面是沒有寫寬度的,而是根據瀏覽器的寬度自適應,這樣就會有個問題,如果不設置裏面的span的寬度,那麼是不會判斷超出的,如果給span設置固定寬度,那麼e又不符合l-col的根據屏幕寬度自適應了,所以可以這麼做,在el-col上面加一個width="100%",這樣即保留了el-col的自適應,span寬度也沒有固定死

white-space:nowrap;/*不換行顯示*/
overflow:hidden;/*超出的文本隱藏*/
text-overflow:ellipsis;/* 溢出用省略號*/

代碼如下:

<el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
  <el-form-item label="設計單位" style="width: 100%">
    <el-tooltip :content="rprjInfoObject.rprjName" placement="top">
      <span
        style="
          display: block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        "
        class="lab-text"
        >{{ rprjInfoObject.designDep }}</span
      >
    </el-tooltip>
  </el-form-item>
</el-col>
<el-col....

效果如圖: