Foros del Web - Ver Mensaje Individual

jonni09lo · #7 (**permalink**) 26/09/2013, 15:29

Hola, siguiendo el siguiente link y usando el código allí propuesto, he hecho lo que le faltaba: agregar el corchete.

Este seria el código:

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Document...</title>
        <style type="text/css">
        body {
            color: white;
            background-color: black;
        }
        #estrofa {
            color: black;
            background-color: white;
            width: 19em;
            font-size: 16px;
        }
        #estrofa div {
            text-align: right;
            line-height:20px;
            min-height:20px;
        }
        </style>
        <script type="text/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 += ']';
                }
            }
        }
        </script>
    </head>
    <body>
        <h2>Simula un formato de poesí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';" />
    </body>
</html>

El demo esta en el siguiente link.

Esta podría ser una base para lograr lo que deseas. A mi punto de vista el cabo suelto que quedaría por resolver es el asunto de el alto del div que contiene el verso, considerando de que tiene un min-height y un line-height de 20px dos lineas podrían ser 40px. pero como algunos navegadores el alto puede variar (el de una sola linea) habría que hacer mejores pruebas (poniendo un alto maximo de 25 30 pixeles)

Saludos