先上圖說話吧

上圖為現(xiàn)狀，下圖為希望結(jié)果

核心代碼如下(寫的不好，大家別見怪)

    <svg :width="panelObj.panelWidth" :height="panelObj.panelHeight" >
      <!-- …… -->
      <!-- 繪制節(jié)點(diǎn) -->
      <g v-for="(node,i) in nodes" :key="i">
        <!-- 節(jié)點(diǎn)標(biāo)題 -->
        <rect :x="node.x+30" :y="node.y+5" width="20" height="20" :fill="`url(#titleIcon)`"/> 
        <text :x="node.x+50" :y="node.y+flow.lineHeight">{{node.title}}</text>
        <!-- 節(jié)點(diǎn)列表 -->
        <g v-for="(list,i) in node.textList" :key="i">
          <rect :x="node.x+5" :y="node.y+(i+1)*flow.lineHeight+6" width="20" :height="flow.lineHeight-2" :fill="`url(#${list.dataType})`" />
          <text :x="node.x+28" :y="node.y+(i+2)*flow.lineHeight">{{list.label }}</text>
        </g>
      </g>
    </svg>

試過用CSS處理文本溢出的方式，但是沒起效；
試過用字符數(shù)截取的方法，但是英文字符的大小差異較大，參數(shù)難以統(tǒng)一。
試了很久，也沒能解決這問題，希望路過的老司機(jī)帶下。