JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Simula un formato de poes&iacute;a.</h2>

<div id=estrofa>

Existe un recurso usado para escribir poesía<br>
que corta el ancho de una línea si no cabe el verso.<br>
Pregunté en el Foro porque de veras no sabía<br>
si en CSS hay alguna forma para hacerlo.<br>

</div>

<input type=button value="formato verso" onclick="versea(); this.disabled='disabled';">

CSS

body {
	color: white;
	background-color: black;
}

#estrofa {
	color: black;
	background-color: white;
	width: 19em;
	font-size: 16px;
}

#estrofa div {
	text-align: right;
}

JavaScript

var estrofa;
var versos;
var totVersos = [];
var contEstrofa = "";

function versea(){
	estrofa = document.getElementById("estrofa");
    var versos = estrofa.innerHTML.replace(/<BR>/gi, "</span><br>\r\n<span>");
    estrofa.innerHTML = "<span>" +versos+ "</span>";
    versea2();
}

function versea2(){
    for(i=0; i<estrofa.getElementsByTagName("span").length; i++){
        totVersos[i] = estrofa.getElementsByTagName("span")[i].offsetWidth;
	}

	for(i=0; i<totVersos.length; i++){
		estrofa.getElementsByTagName("span")[i].style.width = totVersos[i] + "px";
	}

    contEstrofa = estrofa.innerHTML;

    contEstrofa = contEstrofa.replace(/span/gi,"div").replace(/<br>/gi,"");

    estrofa.innerHTML = contEstrofa;
    
    for(i=0; i<estrofa.getElementsByTagName("div").length; i++){
        var versoHeight = estrofa.getElementsByTagName("div")[i].offsetHeight;
        //alert(versoHeight);
        if(versoHeight > 20){
            estrofa.getElementsByTagName("div")[i].innerHTML += ']';
        }
	}
}