el-tree文本內容過多顯示不完全問題（解決）

布局：

<span class="custom-tree-node" slot-scope="{ node, data }">  外層span 樹節點
  <span :title="node.label" class="em-tree-text">{{ node.label }}</span>  內層span(用於文本內容顯示)
  <span>

:title="node.label" 綁定該屬性可實現將鼠標移上去顯示全部內容

 樣式：

.custom-tree-node {
  flex: 1;
display: flex;//這里的display屬性不用修改（使樹節點末尾的按鈕右對齊）
align-items: center;
justify-content: space-between;
font-size: 12px;
padding-right: 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;//寬度必須是這個，不能使用px或者min-width或者min-width等，因為外層使用了el-card包裹是可以拉動的，換言之樹節點的寬度隨時可變
& span.em-tree-text{
    display: inline-block;//block一樣
overflow: hidden;
white-space: nowrap;
width:100%;
text-overflow: ellipsis;
}

 

 另外：input框獲取文本內容時，內容過長顯示不完全也會將文本框內末尾的圖標覆蓋，看上去雜亂無章，原理同上，背景同上（也是使用的el-card包裹，左右拖動dragbar文本框的寬度會變化，也是動態的）

.el-input__inner{
  height: 30/$r+rem !important;//tree-from-input
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;//超出輸入框寬度就自動顯示三個小點，但不能設置具體寬度！
padding-right: 25px;
width: 100%;
}