代碼顯示:
<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....
效果如圖: