Add ellipses to overflowing text in SVG?

Question

I'm using D3.js. I'd like to find an SVG equivalent to this CSS class, which adds ellipses if text flows out of its containing div:

.ai-ellipsis {   display: block;   white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis;   -o-text-overflow: ellipsis;   -moz-binding: url(<q>assets/xml/ellipsis.xml#ellipsis</q>); } 

This is my SVG:

<g class="bar" transform="translate(0,39)">     <text class="label" x="-3" y="6.5" dy=".35em" text-anchor="start">Construction</text>         <rect height="13" width="123"></rect> </g> 

It's generated as follows:

barEnter.append("text").attr("class", "label")         .attr("x", -3).attr("y", function() { return y.rangeBand() / 2})         .attr("dy", ".35em").attr("text-anchor", "start")         .text(function(d) {             return d.Name;         }); 

Currently the text is overflowing and overlapping the rect element.

Is there any way I can say "if text is more than a certain width, crop it and add ellipses"?

Answer 1

a wrapper function for overflowing text:

    function wrap() {         var self = d3.select(this),             textLength = self.node().getComputedTextLength(),             text = self.text();         while (textLength > (width - 2 * padding) && text.length > 0) {             text = text.slice(0, -1);             self.text(text + '...');             textLength = self.node().getComputedTextLength();         }     }  

usage:

text.append('tspan').text(function(d) { return d.name; }).each(wrap); 

Answer 2

I am not aware of an equivalent CSS class for SVG, but you can use foreignObject to embed HTML in SVG. This gives you access to this functionality and is more flexible in general (e.g. you can do automatic line breaking easily).

See here for a complete example.