JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<div class="svg">

</div>

JavaScript

var data = ["lorem ipsem","dolor sit","quo ubique"]
    var svg = d3.select("div.svg").append("svg")
    	.append("g")
      .attr("class","node").attr("transform", function (d) { return "translate(" + 10 + "," + 10 + ")" });
    
    svg.selectAll("g.node")
	    .data(data)
      .enter()
      .append("text")
      .attr("y", 0)
      .attr("x", function(d,i){return 100*i;})
      .text(function(d){return d;})
      .call(wrap, 10);
      
       function wrap(text, width)
        {
            text.each(function ()
            {
                var text = d3.select(this),
                    words = text.text().split(/\s+/).reverse(),
                    word,
                    line = [],
                    lineNumber = 1,
                    lineHeight = 2,
                    x = text.attr("x"),
                    y = text.attr("y");
                    tspan = text.text(null).append("tspan").attr("x", x).attr("y", y);
                    
                while (word = words.pop())
                {
                    line.push(word);
                    tspan.text(line.join(" "));
                    if (tspan.node().getComputedTextLength() > width)
                     {
                        line.pop();
                        tspan.text(line.join(" "));
                        line = [word];
                        tspan = text.append("tspan").attr("x", x).attr("y", ++lineNumber * lineHeight + y).text(word);
                    }
                }
            });
        }