How to handle overflow of text tag text in svg tags?

Let"s talk in the picture above first

the core code is as follows (please don"t mind if it"s not well written)

    <svg :width="panelObj.panelWidth" :height="panelObj.panelHeight" >
      <!--  -->
      <!--  -->
      <g v-for="(node,i) in nodes" :key="i">
        <!--  -->
        <rect :x="node.x+30" :y="node.y+5" width="20" height="20" :fill="`url(-sharptitleIcon)`"/> 
        <text :x="node.x+50" :y="node.y+flow.lineHeight">{{node.title}}</text>
        <!--  -->
        <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(-sharp${list.dataType})`" />
          <text :x="node.x+28" :y="node.y+(i+2)*flow.lineHeight">{{list.label }}</text>
        </g>
      </g>
    </svg>

tried to use CSS to deal with text overflow, but it didn"t work;
tried the method of intercepting characters, but the size of English characters varied greatly, and the parameters were difficult to unify.
tried for a long time, but failed to solve this problem. I hope the old driver passing by will bring it down.

<svg :width="panelObj.panelWidth" :height="panelObj.panelHeight" >   <g v-for="(node,i) in nodes" :key="i"> <foreignObject width="node.width" height="node.height" x="node.x" y="node.y">  <img :src="node.titleImgSrc" />{{node.title}}  <p v-for="(list,i) in node.textList" :key="i"><img :src="list.dataType" />{{list.label}} </foreignObject> </g> </svg>