Foro de elhacker.net

Como puedo hacer que dependiendo si un texto revasa un div este se achique y que al final agregue tres puntos... "[Cadena cortada]..."

Yo hice algo así con una función PHP y me funciona de 9 no digo de 10 porque si fuera así no estaría escribiendo este tema...

Voy a tomar como referencia google, si tratan de ir a inspeccionar elementos y reemplazar un texto html por una cadena muy larga van a ver que cuando revasa el div este se va a cortar y al final va agregar tres puntos...

No me gusta del todo mi función php porque esta recibe 3 parametros, cadena, minimo de letras aceptable para acortar, cantidad de letras a mostrar + los puntos suspensivos.

el problema es..

$cadena = 'OOOOOOOOPO';
<?php echo Acortar($cadena, 10, 9); ?>
 

mostrará => 'OOOOOOOOP...'

pero imaginen que la cadena no tienen o mayúsculas sino i minúsculas

$cadena = 'iiiiiiiipi';
<?php echo Acortar($cadena, 10, 9); ?>
 

mostrará => 'iiiiiiiip...'

Como ya se pueden dar cuenta la ultima cadena es más corta (estoy hablando del ancho que ocupa) entonces este método no es tan eficiente...

por lógica imagino que debe ser una función javascript...

En CSS tienes elipsis, text-overflow: ellipsis; donde cuando texto supera el ancho maximo, lo corta con un elipsis (...).

white-space: nowrap;
max-width: 50px;
overflow: hidden;
text-overflow: ellipsis;

En javascript tienes varias librerias que hacen eso (mirate elipsis.js o dotdotdot.js) o que tambien te permiten hacer el texto más pequeño.

Saludos

Funciona muy bien, y yo matandome con el código con javascript cuando tenia que hacer esto que era muy simple...

igualmente si es para un texto que sea solamente ancho funciona, pero digamos que si tengo una caja que solamente como máximo permita 2 saltos de lineas... digamos que el font-size es 14 entonces el max-height del texto es 32.5px para que se adapte bien con la caja.. ¿como lo podría hacer?

porque no me está mostrando los tres puntos "..." o quizás no se pueda hacer para eso, es decir en forma vertical...

igual muchas gracias!!

Prueba con el line-height: 32.5px;
Estás haciendo diseño responsive para tus preoyectos?
Puede que en el móvil o en monitores más grandes o más peques se vea mal.