3

Estoy intentando buscar un método que reduzca un texto HTML hasta que el mismo no rebase el tamaño de su contenedor con overflow hidden. El texto puede tener diferentes fuentes, tamaños de letras o altos de línea por lo que es muy probable que la última línea quede cortada por la mitad, es esto lo que quiero evitar. He encontrado esta pregunta, pero la solución está hecha para manejar solamente caracteres especiales como estos <>&. También he encontrado esta otra pero es demasiado complicada y no funciona muy bien cuando el HTML es muy complejo. Algunas soluciones son solo para WebKit o no funcionan eficientemente con cualquier tipo de texto.

Aquí dejo el código que tengo realizado hasta el momento (es tan inefectivo como los anteriores que he encontrado), solo lo he situado para dejar claro que he estado trabajando en ello y no vengo buscando una respuesta sin haberlo pensado mucho. No deseo que se revise este código sino que solamente se vea qué camino he tomado. Este código es capaz de hacer más de 1000 iteraciones y demorarse varios segundos dependiendo del HTML y la longitud del mismo y teniendo en cuenta que en mi aplicación el contenedor cambiará de tamaño con mucha frecuencia este código la convertiría en inutilizable.

¿Alguien conoce algún método rápido y efectivo para lograr hacer esto?

NOTA: Mis textos HTML solo contienen TEXT_NODEs y ELEMENT_NODEs (excluyendo scripts y styles), No necesito manejar otro tipo de nodos por el momento.

function reduceHTMLText (container) {

    var longer = false; 
    var reg = /^([\s\S]+?)\s*\.+$/;
    var regpunt = /^(.*?)[,;\:\.]$/;

    var isOverflow = function () {
        return container.scrollHeight > container.clientHeight;
    };

    var reduce = function (element) {

        var nodes = element.childNodes;

        if (nodes.length === 0) {

            longer = isOverflow();

            if (longer) { reduce(container); }

            return;

        }

        var last = nodes[nodes.length - 1];

        //---Depend of the node type
        switch (last.nodeType) {

            //---If the node is a text
            case 3:

                var str = last.data.replace(reg, "$1");
                var words = str.split(" ");

                //---If the words array has more than five words
                if (words.length > 5) {

                    words = words.slice(0, -5);

                    words[words.length - 1] = words[words.length - 1].replace(regpunt, "$1");

                    last.data = words.join(" ") + "...";

                } else {

                    last.parentNode.removeChild(last);

                }

                longer = isOverflow();

                if (longer) { reduce(element); }

            break;

            //---If the node is an element node
            case 1:

                if (last.childNodes.length) {

                    reduce(last);

                } else {

                    last.parentNode.removeChild(last);

                    longer = isOverflow();

                    if (longer) { reduce(element); }

                }

            break;

        }

    };

    longer = isOverflow();
    
    if (longer) { reduce(container); }

}

var container = document.querySelector(".container");

reduceHTMLText(container);
.container {
    background-color: #EEE;
    height: 170px;
    overflow: hidden;
    width: 500px;
}
<div class="container">
    <p style="text-align: left;">
        Vestibulum imperdiet ipsum nec urna ornare, quis malesuada odio viverra. Etiam mollis dolor lacus, ac cursus leo aliquam ut. Etiam eu elit in <strong>massa egestas <em>interdum ut</em> vel magna</strong>. Suspendisse nisl velit, bibendum id hendrerit at, maximus vitae neque. Integer varius sed ante quis porta. Aenean venenatis pellentesque semper. Etiam a quam ut mauris imperdiet vehicula tristique id lacus. <a href='#'>Aliquam lacus metus, mattis a viverra a, <strong>convallis sit amet diam</strong>. In dignissim lorem</a> sit amet, consectetur adipiscing elit. Cras non sem laoreet, tristique felis id, fringilla mi. Fusce sit amet iaculis enim. In malesuada risus eu urna interdum gravida. <strong>Praesent malesuada felis et mi gravida</strong>, at <em>interdum nunc sollicitudin. Quisque <strong>ultrices nibh</strong> in malesuada tempus</em>. Donec tempus efficitur maximus. Praesent ac lacinia odio. Maecenas vel nunc condimentum, luctus diam ac, molestie purus. Cras non tempor magna. Nulla et eros in nunc iaculis eleifend vel at nisi. <strong>Castro pero normal</strong> Aenean quis ultricies arcu, non volutpat neque. Aliquam at justo sed nisi malesuada lobortis eu ut risus. Fusce at enim quis dolor dignissim gravida vel a felis <span class="soleil-label">text paloma samona</span> is cube rubick <a href="http://google.com">because is impossible to</a> mantain the text in a long way.
    </p>
    <p style="text-align: center;">
        <div class='special'>
            <span class="soleil-cta-button-pink">
                <a href="http://google.com" class="soleil-cta-button-pink">NO REGRETS</a>
            </span>
        </div>
    </p>
</div>

4
  • Haces tres preguntas, lo que no funciona muy bien a la hora de elegir la mejor respuesta. También haces preguntas subjetivas, lo que ocasiona problemas del mismo tipo. Honestamente no tengo claro si se aceptan en SOes preguntas de Code Review. Pero te invito a que analices tu publicación para que te asegures que si existe un problema real y concreto con tu código, este sea expuesto claramente.
    – toledano
    Commented el 26 feb. 2017 a las 4:12
  • Tienes razón @toledano, las ganas de obtener respuestas a mis dudas me llevaron a realizar varias preguntas y esto nunca es bueno. No deseo una revisión de mi código, este código no se debería usar ya que puede convertir a cualquier aplicación en inservible para el usuario, solo lo he situado para dejar claro que he estado trabajando en esto sin encontrar una solución efectiva. Un cordial saludo y gracias por tus señalamientos, ya he editado mi pregunta para hacerla más concisa.
    – ElChiniNet
    Commented el 26 feb. 2017 a las 10:38
  • Hola, a mí me dio ganas de probar de ayudarte y me pasó lo mismo. No entendí si lo que quieres que cambie son los tamaños de letra (hasta que entre), el espaciado o qué. Y eso de que la última línea esté entera (entiendo que se ocupe todo el renglón) es por demás difícil de cumplir en todos los casos. Quizás esté bueno también que des una muestra (un dibujo o una captura HTML) de lo que querrías obtener y de lo que tienes ahora. Commented el 26 feb. 2017 a las 12:12
  • @EmilioPlatzer, toma el código HTML y pruébalo sin el código JavaScript. Verás que la última linea queda cortada por la mitad. Deseo que se vea el texto solo hasta la línea superior a esta. Imagina hacer un slice(0, cantidad de caracteres) pero con texto HTML. Gracias por tomarte la molestia de ayudar. Un saludo.
    – ElChiniNet
    Commented el 26 feb. 2017 a las 12:20

2 respuestas 2

2

Te propongo una solución que no implique el uso de JavaScript, solo css.

Defines el numero de lineas que quieres mostrar en -webkit-line-clamp. El tamaño de linea line-height. El tamaño de la fuente en font-size. En height pones cada uno de estos valores multiplicando entre ellos. Es una solución simple que te puede ayudar en muchos casos sin tener que ejecutar JS.

.container {
    background-color: #EEE;
}
.truncate {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 1.4*5*16; /* Fallback for non-webkit (line-height*number-lines*size )*/
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.4;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="truncate container">
Vestibulum imperdiet ipsum nec urna ornare, quis malesuada odio viverra. Etiam mollis dolor lacus, ac cursus leo aliquam ut. Etiam eu elit in <strong>massa egestas <em>interdum ut</em> vel magna</strong>. Suspendisse nisl velit, bibendum id hendrerit at, maximus vitae neque. Integer varius sed ante quis porta. Aenean venenatis pellentesque semper. Etiam a quam ut mauris imperdiet vehicula tristique id lacus. <a href='#'>Aliquam lacus metus, mattis a viverra a, <strong>convallis sit amet diam</strong>. In dignissim lorem</a> sit amet, consectetur adipiscing elit. Cras non sem laoreet, tristique felis id, fringilla mi. Fusce sit amet iaculis enim. In malesuada risus eu urna interdum gravida. <strong>Praesent malesuada felis et mi gravida</strong>, at <em>interdum nunc sollicitudin. Quisque <strong>ultrices nibh</strong> in malesuada tempus</em>. Donec tempus efficitur maximus. Praesent ac lacinia odio. Maecenas vel nunc condimentum, luctus diam ac, molestie purus. Cras non tempor magna. Nulla et eros in nunc iaculis eleifend vel at nisi. <strong>Castro pero normal</strong> Aenean quis ultricies arcu, non volutpat neque. Aliquam at justo sed nisi malesuada lobortis eu ut risus. Fusce at enim quis dolor dignissim gravida vel a felis <span class="soleil-label">text paloma samona</span> is cube rubick <a href="http://google.com">because is impossible to</a> mantain the text in a long way.
</div>

1
  • Hola @RTower, gracias por tu respuesta. Esta es una de las soluciones que he comentado que consulté y deseché ya que no se ajusta a lo que necesito. Si lees esta parte de mi texto entenderás por qué: El texto puede tener diferentes fuentes, tamaños de letras o altos de línea. Por otro lado el tamaño del contenedor es dinámico, no es un tamaño fijo.
    – ElChiniNet
    Commented el 27 feb. 2017 a las 9:55
0

No sé si he entendido bien la necesidad que tienes de cara a la visualización del código, pero si te he entendido bien, creo que utilizando 'css' con las propiedades 'white-space:normal' y overflow-y:scroll' podrás ajustar el texto a la limitaciones del contenedor:

function reduceHTMLText (container) {

    var longer = false; 
    var reg = /^([\s\S]+?)\s*\.+$/;
    var regpunt = /^(.*?)[,;\:\.]$/;

    var isOverflow = function () {
        return container.scrollHeight > container.clientHeight;
    };

    var reduce = function (element) {

        var nodes = element.childNodes;

        if (nodes.length === 0) {

            longer = isOverflow();

            if (longer) { reduce(container); }

            return;

        }

        var last = nodes[nodes.length - 1];

        //---Depend of the node type
        switch (last.nodeType) {

            //---If the node is a text
            case 3:

                var str = last.data.replace(reg, "$1");
                var words = str.split(" ");

                //---If the words array has more than five words
                if (words.length > 5) {

                    words = words.slice(0, -5);

                    words[words.length - 1] = words[words.length - 1].replace(regpunt, "$1");

                    last.data = words.join(" ") + "...";

                } else {

                    last.parentNode.removeChild(last);

                }

                longer = isOverflow();

                if (longer) { reduce(element); }

            break;

            //---If the node is an element node
            case 1:

                if (last.childNodes.length) {

                    reduce(last);

                } else {

                    last.parentNode.removeChild(last);

                    longer = isOverflow();

                    if (longer) { reduce(element); }

                }

            break;

        }

    };

    longer = isOverflow();
    
    if (longer) { reduce(container); }

}

var container = document.querySelector(".container");

reduceHTMLText(container);
.container {
    background-color: #EEE;
    height: 170px;
    width: 500px;
}

.container p {padding: 15px; white-space:normal;overflow-x: hidden;overflow-y: scroll;}
<div class="container">
    <p style="text-align: left;">
        Vestibulum imperdiet ipsum nec urna ornare, quis malesuada odio viverra. Etiam mollis dolor lacus, ac cursus leo aliquam ut. Etiam eu elit in <strong>massa egestas <em>interdum ut</em> vel magna</strong>. Suspendisse nisl velit, bibendum id hendrerit at, maximus vitae neque. Integer varius sed ante quis porta. Aenean venenatis pellentesque semper. Etiam a quam ut mauris imperdiet vehicula tristique id lacus. <a href='#'>Aliquam lacus metus, mattis a viverra a, <strong>convallis sit amet diam</strong>. In dignissim lorem</a> sit amet, consectetur adipiscing elit. Cras non sem laoreet, tristique felis id, fringilla mi. Fusce sit amet iaculis enim. In malesuada risus eu urna interdum gravida. <strong>Praesent malesuada felis et mi gravida</strong>, at <em>interdum nunc sollicitudin. Quisque <strong>ultrices nibh</strong> in malesuada tempus</em>. Donec tempus efficitur maximus. Praesent ac lacinia odio. Maecenas vel nunc condimentum, luctus diam ac, molestie purus. Cras non tempor magna. Nulla et eros in nunc iaculis eleifend vel at nisi. <strong>Castro pero normal</strong> Aenean quis ultricies arcu, non volutpat neque. Aliquam at justo sed nisi malesuada lobortis eu ut risus. Fusce at enim quis dolor dignissim gravida vel a felis <span class="soleil-label">text paloma samona</span> is cube rubick <a href="http://google.com">because is impossible to</a> mantain the text in a long way.
    </p>
    <p style="text-align: center;">
        <div class='special'>
            <span class="soleil-cta-button-pink">
                <a href="http://google.com" class="soleil-cta-button-pink">NO REGRETS</a>
            </span>
        </div>
    </p>
</div>

Espero haber resuelto tu problema, pero como te comentaba, no tengo claro si es esto lo que necesitas.

1
  • Hola Jorge, muchas gracias por tu respuesta. Estás usando el mismo código que usé en mi pregunta, dicho código funciona sin añadir nada más, pero como comenté: No deseo que se revise este código sino que solamente se vea qué camino he tomado. Este código es capaz de hacer más de 1000 iteraciones y demorarse varios segundos dependiendo del HTML y la longitud del mismo y teniendo en cuenta que en mi aplicación el contenedor cambiará de tamaño con mucha frecuencia este código la convertiría en inutilizable.
    – ElChiniNet
    Commented el 28 ene. 2020 a las 18:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.