Truncating svg text to fit a rect

css, javascript, jquery, svg, truncate

Solution

The "overflow" CSS property won't work in SVGs because `<text>` elements have no "box" to overflow.

You could try experimenting with the "clip-path" property instead. It is a CSS property specific to SVGs. You would need to define a clip path in your SVG that was the size of the truncated box. Then add and remove it with your CSS rules.

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

#text_trunc:hover{
    clip-path: none;
}

Unfortunately, this solution doesn't allow for fancier behaviour like automatic ellipses.

Problem

What i need is to truncate a text so that it fills the size of a `svg` rectangle and then popup to its full-size on `mouse-over`. I have tried with css using the following code to hide the text and then popup but it doesnt 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 have created all the `svg` elements using `javascript` and this is where i create an `id` for the text element `text.setAttributeNS(null, "id", "text_trunc");` My best guess is that `svg` creates an image which cannot be truncated by `css`...still need a solution. Thanks in advance

Original source