How can I add truncate like ... if there is overflow in the <g></g> element

I'm using <g></g>

<g clip-path="url(#card_clip)" >
            ${card_body()}
            ${card_image()}
            ${edit_icon()}
            ${add_icon()}
          </g>

<g clip-path="url(#card_clip)" >
            ${card_body()}
            ${card_image()}
            ${edit_icon()}
            ${add_icon()}
          </g>

At the moment it is just adding showing if their is overflow but I want to add ... like thing, because I don't have the implementation of #card_clip I want to overide it

3 Replies

b1mind•4mo ago

<g> is for SVG elements, this is inside a SVG?

jalen21•4mo ago

Yes it is, I'm using d3 library with createSVG()

MarkBoots•4mo ago

i never used d3, but i found this post on stack overflow, maybe it'll help you https://stackoverflow.com/questions/9241315/trimming-text-to-a-given-pixel-width-in-svg

Stack Overflow

Trimming text to a given pixel width in SVG

I'm drawing text labels in SVG. I have a fixed width available (say 200px). When the text is too long, how can I trim it ? The ideal solution would also add ellipsis (...) where the text is cut. B...

Gaming

Programming

How can I add truncate like ... if there is overflow in the <g></g> element