JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas"></canvas>

JavaScript

var t = `However, I don't care that much about optimization. As long as the lines are (in most cases) roughly even, I'm fine if the solution doesn't work in every single edge case, or can't be proven to be the least time complexity. I just need a real world solution that can take a string, and a number of lines (greater than 2), and give me back an array of strings that will usually look pretty even.`;


function getTextTotalWidth(text) {
	var canvas = document.createElement("canvas");
	var ctx = canvas.getContext("2d");
  ctx.font = "12px Arial";
	ctx.fillText(text,0,12);
  return ctx.measureText(text).width;
}

function getLineWidth(lines, totalWidth) {
	return totalWidth / lines ;
}

function getAverageLetterSize(text) {
	var t = text.replace(/\s/g, "").split("");
  var sum = t.map(function(d) { 
  	return getTextTotalWidth(d); 
  }).reduce(function(a, b) { return a + b; });
	return  sum / t.length;
}

function getLines(text, numberOfLines) {
	var lineWidth = getLineWidth(numberOfLines, getTextTotalWidth(text));
  var letterWidth = getAverageLetterSize(text);
  var t = text.split("");
  return createLines(t, letterWidth, lineWidth);
}

function createLines(t, letterWidth, lineWidth) {
	var i = 0;
  var res = t.map(function(d) {
  	if (i < lineWidth || d != " ") {
    	i += letterWidth;
    	return d;
    }
    i = 0;
    return d + "<br />";
  })
  return res.join("");
}

var div = document.createElement("div");
div.innerHTML = getLines(t, 7);
document.body.appendChild(div);