element ui中el-tree文字显示不全解决方案

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// 问题描述 // 在项目中使用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><br><br>// css样式// 文本超出时，先隐藏文本显示省略号，然后添加title属性<br>.span-ellipsis {   width: 100%;   overflow: hidden;   text-overflow: ellipsis;   white-space: nowrap; }

效果图如下所示：