La verdad es que por ahora lo veo difícil de hacer con CSS solamente. Ya existen propuestas para
fit-content y con alguna combinación creo que andaría, pero hasta que no sea compatible no lo vamos a usar.
Para que quede claro lo que estoy sugiriendo, les dejo un ejemplo de lo que debería hacer el navegador con la etiqueta correspondiente (en el código usé
span y
div a falta de otras mejores).
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>VERSIFICACIÓN.</title>
<script type="text/javascript">
var versos;
function versea(){
versos = document.getElementById("estrofa");
var sepVersos = (versos.innerHTML.replace(/<BR>/gi,"<br>")).split("<br>");
var totVersos = sepVersos.length;
//alert(sepVersos+ " " +totVersos)
for(i=0; i<totVersos; i++){
var esteVerso = versos.getElementsByTagName("span")[i];
var ancho = esteVerso.offsetWidth;
//alert(ancho)
esteVerso.style.width = ancho +"px";
//alert(versos.innerHTML)
}
var ajustaVersos = versos.innerHTML.replace(/span/gi,"div");
ajustaVersos = ajustaVersos.replace(/<BR>/gi,"");
versos.innerHTML = ajustaVersos;
//alert(versos.innerHTML)
}
</script>
<style type="text/css">
body {
color: white;
background-color: black;
}
#estrofa {
color: black;
background-color: yellow;
width: 19em;
font-size: 16px;
}
.verso {
background-color: silver;
text-align: right;
}
.cebra {
background-color: white;
}
</style>
</head>
<body>
<h2>Simula un formato de poesía.</h2>
<div id=estrofa>
<span class="verso cebra" class=verso>Existe un recurso usado para escribir poesía</span><br>
<span class=verso>que corta el ancho de una línea si no cabe el verso.</span><br>
<span class="verso cebra">Pregunté en el Foro porque de veras no sabía</span><br>
<span class=verso>si en CSS hay alguna forma para hacerlo.</span>
</div>
<input type=button value="formato verso" onclick="versea(); this.disabled='disabled';">
</body>
</html> Igual te agradezco mucho el tiempo y el trabajo que te estás tomando,
kseso?, siempre se puede seguir probando algo más.
P.D. : Y ya me está dando vergüenza esa rima barata que puse ...
...
