Inicia sesión



Adición de lineas multiples con puntos suspensivos con CSS

Adición De Lineas Multiples Con Puntos Suspensivos Con CSSUna gran cantidad de texto mostrado realmente puede destruir el diseño de su sitio, sobre todo cuando no hay manera de saber la cantidad de texto que puede contener cada elemento.

Es posible diseñar su sitio para quedar bien con sólo unas pocas líneas de texto, pero mucho más tarde se está mostrando todo el ipsum lorum.

La manera de solucionar este problema es mediante la adición de CSS a un elemento que limitará la visibilidad del texto después de cierto punto. Una forma visualmente atractiva de hacer esto es cortar el texto en un determinado momento y añade una elipsis.


¿Que Es La Elipsis?


Si usted no sabe lo que es la elipsis se puede aprender más sobre él. Básicamente se trata de la ... al final del texto, que permite al lector saber que el texto / pensamiento ha sido de corte. En este post vamos a ver cómo añadir tanto los efectos simples y múltiples línea de puntos suspensivos usando puramente CSS.


Linea Recta De Puntos Suspensivos


El siguiente bloque de código creará el efecto de puntos suspensivos una vez que el elemento llegue a la anchura del elemento padre.

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

Linea Multiples De Puntos Suspensivos


Si te fijas, el último efecto es grande para añadir puntos suspensivos a las líneas individuales de texto, pero el texto no se rompa en varias líneas debido a la línea que dice white-space: nowrap; . Esto fuerza al texto para mantenerse en la misma línea, independientemente del tiempo que es. Con el fin de solucionar este problema y ser capaz de mostrar varias líneas de texto antes de añadir los puntos suspensivos debemos usar la siguiente clase de lugar.

.block-ellipsis {
  display: block;
  display: -webkit-box;
  max-width: 100%;
  height: 43px;
  margin: 0 auto;
 
  line-height: 1;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Para que esto funcione correctamente el código hay que hacer algunos cálculos v La propiedad altura es igual al número de líneas deseadas multiplicado por el tamaño de fuente, más de 1 píxel para dar cuenta de trazos bajos de caracteres.


Por lo tanto, en este ejemplo, el tamaño de fuente se establece en 14px, y yo quería mostrar 3 líneas de texto antes de añadir el elipsis. Así que 3 x 14 + 1 = 43, lo que significa que la altura total será de 43px. Es bastante simple, pero funciona muy bien.


Nota! El efecto de puntos suspensivos requiere webkit, lo que significa que si alguien lo ve utilizando un navegador que no es compatible webkit entonces no van a ver el ... pero el texto todavía será cortada en el punto correcto, por lo que este efecto todavía funciona en todos los principales navegadores.


Sólo una nota rápida, para asegurar que funcionen tienen que estar dentro de un div con un ancho establecido, si el elemento padre no tiene anchura a continuación, el texto se acaba de seguir para siempre y el efecto no va a funcionar. En el ejemplo anterior, la anchura de la matriz se fijó en 300. Así que una vez alcanzado el texto 300px, el efecto puntos suspensivos se hizo cargo. Bastante simple pero muy útil! Si usted tiene algún otro consejo o trucos CSS ser Shure compartirlas en los comentarios o enviarme un correo electrónico!

Ver resultado



  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-22
  • Categorias: Diseño Web CSS3 html5 Html WebSite Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Tablas En DIVs

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-14
  • Categorias: CSS3 html5 Html webmasters Noticias Tutorial

Protocolos de seguridad en redes inalambricas

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-14
  • Categorias: Encriptacion Internet Red Claves Wifi Seguridad Noticias Tutorial Informatica

Descifrar contraseñas de archivos comprimido

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-14
  • Categorias: Noticias Tutorial Encriptacion Software WinRAR

Cursos que aún ofrecen certificados gratuitos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-26
  • Categorias: Cursos Noticias Tutorial Aprendizaje

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial