Node label hyphenation

[markus-ebner]

Hi @dash14, is it possible to have an inbuilt hyphenation? So that if a word or text is too long, it breaks into the next line? Like the CSS attribute word-break: break-all | break-word.

[dash14]

Hi @markus-ebner, Unfortunately, SVGs do not have the ability to automatically break lines. However, this can be achieved by using to write HTML inside the SVG.

Example:

<v-network-graph
  :nodes="nodes"
  :edges="edges"
  :configs="configs"
  :layouts="layouts"
>
  <defs>
    <!-- Cannot use <style> directly due to restrictions of Vue. -->
    <component is="style">
      .custom-label {
        width: 100%;
        height: 100%;
        display: grid;
        place-content: center;
        word-break: break-all;
        pointer-events: none;
        font-size: 12px;
      }
    </component>
  </defs>

  <!-- Override node label -->
  <template #override-node-label="{ nodeId, scale, text, ...slotProps }">
    <foreignObject
      :width="80 * scale" :height="50 * scale" :x="-40 * scale" :y="-25 * scale">
      <div class="custom-label" :style="{ zoom: `${scale * 100}%` }" xmlns="http://www.w3.org/1999/xhtml">
        {{ text }}
      </div>
    </foreignObject>
  </template>
</v-network-graph>

[markus-ebner]

Thank you very much @dash14, didn't know that trick with foreignObject and HTML :) I got it to work as I wanted. Keep up the amazing work @dash14 :)