elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Pregunta]: ¿Como puedo hacer esta técnica?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Pregunta]: ¿Como puedo hacer esta técnica?  (Leído 3,330 veces)
Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
[Pregunta]: ¿Como puedo hacer esta técnica?
« en: 22 Febrero 2020, 01:44 am »

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..

Código
  1. $cadena = 'OOOOOOOOPO';
  2. <?php echo Acortar($cadena, 10, 9); ?>
  3.  

mostrará => 'OOOOOOOOP...'

pero imaginen que la cadena no tienen o mayúsculas sino i minúsculas
Código
  1. $cadena = 'iiiiiiiipi';
  2. <?php echo Acortar($cadena, 10, 9); ?>
  3.  

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...


« Última modificación: 22 Febrero 2020, 01:50 am por MiguelCanellas » En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: [Pregunta]: ¿Como puedo hacer esta técnica?
« Respuesta #1 en: 22 Febrero 2020, 22:50 pm »

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

Código
  1. white-space: nowrap;
  2. max-width: 50px;
  3. overflow: hidden;
  4. 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


En línea

Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: [Pregunta]: ¿Como puedo hacer esta técnica?
« Respuesta #2 en: 23 Febrero 2020, 01:02 am »

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!!
En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Re: [Pregunta]: ¿Como puedo hacer esta técnica?
« Respuesta #3 en: 23 Febrero 2020, 02:24 am »

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.
En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines