參考
element ui的el-tree文字顯示不全的問(wèn)題
問(wèn)題描
在項(xiàng)目中使用element-ui前端UI框架來(lái)構(gòu)建前端界面時(shí)，使用el-tree組件實(shí)現(xiàn)樹(shù)形菜單喷斋，遇到當(dāng)節(jié)點(diǎn)文字過(guò)長(zhǎng)會(huì)出現(xiàn)顯示不全的問(wèn)題架谎；
解決方法
1.隱藏超出的文字癞松，顯示省略號(hào)崭篡，并添加title樹(shù)形
css樣式：
.show-ellipsis {
display: block;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
image.png
2.設(shè)置橫向滾動(dòng)條
重置樣式淮摔，并設(shè)置橫向滾動(dòng)條：
.el-tree {
width: 100%;
height: 100%;
overflow-x: scroll;
overflow-y: scroll;
}
.el-tree>.el-tree-node {
display: inline-block !important;
width:100%;
}
