Truncate svg text according to direct

Question

I need to truncate the text so that it fills the size of the svg rectangle, and then pops up to full size on the mouse-over . I tried using CSS using the following code to hide the text and then the popup, but it doesn't seem to work.

 #text_trunc { width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #text_trunc:hover{ overflow: visible; white-space: normal; width: auto; position: absolute; background-color: rgba(0,0,0,0); } 

I created all svg elements using javascript and here I create id for the text element

text.setAttributeNS(null, "id", "text_trunc");

My best guess is that svg creates an image that css cannot truncate ... still need a solution. thanks in advance

Answer 1

The CSS "overflow" property will not work in SVG because <text> elements do not have a "margin" for overflow.

Instead, you can try experimenting with the click path property. This is a CSS property specific to SVG. You will need to determine the clip path in your SVG, which was the size of a truncated field. Then add and remove it using CSS rules.

 #text_trunc { clip-path: url(#truncbox); } #text_trunc:hover{ clip-path: none; } 

Unfortunately, this solution does not allow you to behave like automatic ellipses.

Answer 2

I think the following url will help you

http://css-tricks.com/forums/discussion/12984/css-display-hidden-text-on-rollover/p1