Using Ellipsis with SVG's TSPAN?

Question

I have a page where we are using SVG to render a sequence diagram. Some of the data represented has the potential to occasionally be very long, so I would like to limit the width of TSPAN elements and provide an ellipsis, while allowing the user to hover over the text and show the full text.

Initially I tried to use CSS in conjunction with the text-overflow property by setting the value to "ellipsis" which is the exact behavior I am looking for, but it doesn't have that functionality available (big bummer) is there any other way to limit the length of text and allow the full text to be shown on an action such as hover?

Answer 1

Create the tspan with the ellipsis text and then have a <title> element with the complete text e.g.

<tspan>Really really...<title>Really really long text</title></tspan>