Add Ellipses to Overflowing Text in Svg

Add ellipses to overflowing text in SVG?

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.

Trimming text to a given pixel width in SVG

One way to do this is to use a textPath element, since all characters that fall off the path will be clipped away automatically. See the text-path examples from the SVG testsuite.

Another way is to use CSS3 text-overflow on svg text elements, an example here. Opera 11 supports that, but you'll likely find that the other browsers support it only on html elements at this time.

You can also measure the text strings and insert the ellipsis yourself with script, I'd suggest using the getSubStringLength method on the text element, increasing the nchars parameter until you find a length that is suitable.

How can I limit or clip text in SVG?

You can use clip-path to clip to whatever shape you want, see e.g masking-path-01 from the svg testsuite.

Relevant parts, defining the clip path:

<clipPath id="clip1">
  <rect x="200" y="10" width="60" height="100"/>
  ... you can have any shapes you want here ...
</clipPath>

and then apply the clip path like this:

<g clip-path="url(#clip1)">
  ... your text elements here ...
</g>

Using Ellipsis with SVG's TSPAN?

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>

How to prevent SVG text from flowing out of its circle?

This is a D3 based solution for SVG elements, since you have an SVG with a D3 force directed graph.

It involves getting the circle's width (which you can do using attr("r") as a getter, but here I'm using getBBox()) and the text's length (here I'm using getComputedTextLength()) and passing those values to a custom function.

First, let's see the circle and the text without any function. This is the text in my demo:

This above all: to thine own self be true, And it must follow, as the night the day, Thou canst not then be false to any man.

As you can see, it's not only longer than the circle, it's actually bigger than the SVG:

var svg = d3.select("svg");var circle = svg.append("circle")  .attr("cx", 200)  .attr("cy", 110)  .attr("r", 100)  .style("fill", "powderblue")  .style("stroke", "darkslategray");
var text = svg.append("text")  .style("text-anchor", "middle")  .style("dominant-baseline", "central")  .attr("x", 200)  .attr("y", 110)  .text("This above all: to thine own self be true, And it must follow, as the night the day, Thou canst not then be false to any man.");

svg {  border: 1px solid gray;}

<script src="https://d3js.org/d3.v5.min.js"></script><svg width="400" height="220"></svg>