elementui:el-tree节点文字内容过长时，无法正常显示(已解决)

最近做项目新接到的前端需求，发生的问题是：在页面左侧的树形节点上，当文字内容过长时，节点内容会超出外部容器无法正常显示，现在的需求是，要求左侧内容栏宽度固定不变，当内部叶子节点的内容超过外部容器时，做省略处理。

处理之前
处理之后

代码如下：

html模板

 <el-tree  node-key="0"  :props="defaultProps" :load="getTrees" lazy
                  @node-click="nodeClick" ref="resourcesTree">
          <div class="showname" slot-scope="{ node, data }" @click="handleclick(node)" > 
              <span > <svg-icon style="margin-right:0px;" v-if="data.type==='group'"
                               icon-class="cabinet-16px" />{{node.label}}</span>
          </div>
</el-tree>

样式配置

.showname{
    width: 170px;//外部容器的宽度
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }