Closed markus-ebner closed 2 years ago
Hi @markus-ebner,
Unfortunately, SVGs do not have the ability to automatically break lines.
However, this can be achieved by using
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>
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 :)
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
.