cómo truncar texto con respecto a la altura de div?

Question

Tengo un div con una altura de 192px. Quiero truncar texto dentro de div y quiero mostrar ... al final. ahora debido a texto grande, el botón se está recortando como se muestra en la instantánea. Esto sucede cuando agrego etiquetas html en él.

¿Alguien puede ayudar?

Answer 1

Prueba el siguiente CSS:

text-overflow: ellipsis; 
overflow: hidden; 
whitespace: no-wrap; 

Esto sólo funciona para las líneas individuales. Para líneas múltiples necesita JavaScript.

Answer 2

Use overflow: hidden ... Puedo obtener más información específica si publica más código. - j-man86 acaba de editar

Answer 3

Para ocultar el texto, no hay solución simple, agregar overflow: hidden propiedad CSS en div como sigue

<div style="overflow:hidden">your code</div> 

Sin embargo para mostrar ... al final, es necesario para obtener los contenidos de div en javascript y usar la función substr allí. Esta será una solución de prueba y error para descubrir cuántos caracteres se pueden mostrar en el div.

Answer 4

Como se mencionó anteriormente, la forma más fácil de resolver el problema sería agregar overflow:hidden al estilo CSS de su div.

Sin embargo, esto no le ayudará a agregar las elipsis (puntos) al final del envoltorio y no hay forma de que sepa que hacer el envoltorio de texto multilínea (terminando con los 3 puntos al final) usando únicamente CSS.

La manera más fácil sería usar jQuery (o bibliotecas JavaScript similares) para envolver el texto y agregar los 3 puntos al final. Ejemplo:

Reference to another StackOverflow post about wrapping content using CSS and jQuery for single line and multi line text.

Se recomienda también a veces para procesar el servidor del lado del contenido y luego mostrarlo procesa en la página, pero a veces es más conveniente (o más rápido/más fácil) que sólo tiene que utilizar JavaScript.

Aquí es un plugin de jQuery que va a hacer el truco: jQuery DotDotDot

Answer 5

Esta pregunta se etiqueta con Javascript, así que aquí está la respuesta que falta.

Puede repetir cada carácter o palabra (como en este ejemplo), mientras comprueba que la altura sea menor que la altura deseada. En cada paso de verdad, puede sobrescribir el contenido del elemento con su texto, pero sin la última palabra/carácter.

En converte este caso he convertido la cadena en una matriz y pop en cada iteración. Esto elimina la última parte de nuestro texto, y se asegura de que el bucle no va infiniteeeee ...

/** 
 
* Truncates the text of an element depending its height. 
 
* 
 
* @param {Element} element 
 
* @param {Number} height 
 
*/ 
 
function truncateByHeight(element, height) { 
 
    var textContent = typeof element.textContent === 'undefined' ? 'innerText' : 'textContent'; 
 
    var parts = element[textContent].split(' '); 
 

 
    while (parts.pop() && element.clientHeight > height) { 
 
    element[textContent] = parts.join(' '); 
 
    } 
 
} 
 

 

 
var element = document.querySelector('.box'); 
 

 
truncateByHeight(element, 120);

<div class="box">Cornua naturae fulgura uno coegit quisquis ad margine? Pluvialibus umentia vultus nulli nunc pendebat speciem emicuit! Margine tonitrua caecoque iapeto. Origine levius nam. Silvas valles temperiemque forma? Ignotas tegit. Hunc ligavit: summaque freta illas invasit deerat proximus. Caelo calidis securae mentes pronaque traxit. 
 

 
Caligine omnia gentes. Posset aere certis eurus titan verba unus homini ora. Sed volucres. Campos effervescere flamina illi pondus umor. Cinxit obstabatque secrevit. Ligavit: natus aberant. Indigestaque regio rapidisque carmen coegit erat discordia liquidas. Ripis nix horrifer terrae dei tepescunt ad vos regio. 
 

 
Nabataeaque fronde pluviaque vos terra tellure flexi. Neu habendum poena locoque ne. Dedit locoque nunc nebulas. Mentisque liquidum summaque porrexerat cepit. Litem mare. Surgere adhuc ipsa. Orbem hanc volucres iapeto habentem. Dissociata otia inminet nubibus passim erant iners. Semina praecipites reparabat spectent fuerat.</div>