title: How to prevent SVG text from flowing out of its circle?
body: <p>This is how the text is displaying inside the circle now:</p>
  
  <p><a href="https://i.stack.imgur.com/2r4Pm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2r4Pm.png" alt="enter image description here"></a></p>
  
  <p>This is how I would like to display the text inside the circle:</p>
  
  <p><a href="https://i.stack.imgur.com/ynJ3E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ynJ3E.png" alt="enter image description here"></a></p>
  
  <p>I'm looking for a way to cut off / hide / or? the part of the text that doesn't fit inside the circle and show three dots at the end of these too-long-texts. I've found many answers that explained how to wrap multiple words in a circle, but I couldn't find a way to fit one too-long word in a circle in this way.</p>
  
  <p>These are the styles added to the circles and texts when they are entered:</p>
  
  <pre><code>enterNode = (selection) =&gt; {
          selection.select('circle')
              .attr("r", 30)
              .style("fill", function (d) {
                  return color(d.label)
              })
              .style("stroke", "#4D5061")
  
          selection.select('text')
              .style("fill", "#3D3B30")
              .style("font-weight", "600")
              .style("text-transform", "uppercase")
              .style("text-anchor", "middle")
              .style("alignment-baseline", "middle")
      }
  </code></pre>
  
  <p>The circles are part of a d3 force layout displayed in this way</p>
  
  <pre><code>&lt;svg&gt;
    &lt;g class="node-group"&gt;
      &lt;g class="node&gt;
        &lt;circle class="circle"&gt;&lt;/circle&gt;
        &lt;text class="text"&gt;&lt;/text&gt;
      &lt;/g&gt;
    &lt;/g&gt;
    &lt;g class="link-group"&gt;...&lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I would really appreaciate it if you have an idea on how to fix this!</p>