element ui中el-tree文字顯示不全解決方案

// 問題描述
// 在項目中使用element-ui前端框架來開發界面時，使用el-tree組件實現樹形菜單，遇到當節點文字過長會出現顯示不全的問題

<el-tree
    ref="tree"
    :data="provinceList"
     lazy
     node-key="id"
     :props="defaultProps"
     @check-change="handleCheckChange"
     @node-expand="handleNodeExpand"
     clearable>
     <span class="span-ellipsis" slot-scope="{ node }">
        <span :title="node.label">{{ node.label }}</span>
      </span>
</el-tree>

// css樣式

// 文本超出時，先隱藏文本顯示省略號，然后添加title屬性
.span-ellipsis {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

效果圖如下所示：