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 contienenTEXT_NODEs
yELEMENT_NODEs
(excluyendoscripts
ystyles
), 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>
HTML
y pruébalo sin el códigoJavaScript
. 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 unslice(0, cantidad de caracteres)
pero con textoHTML
. Gracias por tomarte la molestia de ayudar. Un saludo.