CSS-Manipulando Texto - Oxygenados La comunidad
Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
Menu
post oxygen builder
img-4
CSS Entrada
CSS-Manipulando Texto
Listado Tips CSS
Hay propiedades en CSS para manipular texto que son muy poco usadas, la mayoría de las veces porque estas propiedades no figuran en las opciones de nuestro builder.
Para muestra la primera letra de este texto, la "H" , que hemos puesto a propósito para llamar tu atención.
Seguro que desconocías que hasta se le puede poner color de fondo, bordes, padding..... etc.

✳️  - Obsevación:

No vamos a explicar todas y cada una de las propiedades mostradas, para ver en lo que afecta una propiedad bastará con que elimines esa propiedad bien le cambies los valores para ver para lo que sirve y el efecto visual logrado.

Primera letra diferente.
Para esto necesitamos recurrir a la pseudo-clase ::first-letter de manera que el código quedará de la siguiente manera:
.nuestra-clase::first-letter{
    /*
    Aqui nuestros estilos
    que aplicaremos a nuestra primera letra
    */
}

Click para Copiar
img-8
Copiado
En el texto de abajo vamos a manipular la primera letra del texto mediante la pseudo-clase first-letter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu lacinia dui. Suspendisse volutpat leo at ipsum porta malesuada. Mauris efficitur pellentesque dui, eu suscipit urna laoreet non. Nullam non est urna. Suspendisse sapien diam, condimentum nec ullamcorper vel, imperdiet ac erat. Donec placerat pretium nunc, eu convallis elit pharetra sed. In hac habitasse platea dictumst. Etiam egestas dui metus, nec auctor eros rhoncus vel.
✳️También se le puede manipular con la propiedad opacity, pero no le vemos utilidad práctica alguna.

El código utilizado es este
.nuestra-clase::first-letter{
  font-size: 30px;
  float: left;
  line-height: 1;
  margin: 0.2rem;
  margin-right: 0.6rem;
  padding: 1rem;
  background: #ffa900;
  box-shadow: 0 0 0 .2rem #301896;
  border: .2rem solid #fff;
  border-radius: 5px;
}
Click para Copiar
img-9
Copiado

La ventaja de ::first-letter es que se puede aplicar a cualquier texto, estático o dinámico, y que no empeora la accesibilidad del sitio. Además, si queremos ajustar el posicionamiento de cada inicial respecto al texto es más difícil hacerlo de forma distinta para cada letra, ya que tenemos un único estilo para todas las iniciales. Esto puede ser incómodo en ciertos casos ya que cada navegador ajusta el elemento flotante de forma distinta y algunas letras pueden quedar demasiado o muy poco separadas del texto, así como desplazar más líneas de texto en unos navegadores que en otros.

Logo Oxygenados
Acortar Texto

Póngamonos ahora en el caso en que un texto en un encabezado o en alguna parte en que tenemos un width determinado y queremos que solo ocupe una línea; la cosa puede parecer fácil porque puedes decir: bueno, pongo el texto que quiero y luego lo acorto con puntos supensivos; perfecto, pero ¿que pasa si el texto es dinámico? pues no te vas a poner a editar el texto, o peor aún, textos cada vez que cambien.
Para esto CSS nos da la solución convinando tres propiedades: white-space, overflow y text-overflow

Todo este texto, que justo está abajo y usaremos de ejemplo, y que además suponemos es un texto dinámico, lo podemos convertir con CSS para que no rompa el diseño de la página:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu lacinia dui. Suspendisse volutpat leo at ipsum porta malesuada. Mauris efficitur pellentesque dui, eu suscipit urna laoreet non. Nullam non est urna. Donec placerat pretium nunc, eu convallis elit pharetra sed. In hac habitasse platea dictumst. Etiam egestas dui metus, nec auctor eros rhoncus vel.

Y como resultado obtenemos:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu lacinia dui. Suspendisse volutpat leo at ipsum porta malesuada. Mauris efficitur pellentesque dui, eu suscipit urna laoreet non. Nullam non est urna.

El código para llegar a esto:

.nuestra-clase{
  white-space: nowrap;/* Para que ocupe una sola línea */
  overflow: hidden;/* Oculta todo el texto que sobrepase el ancho del contenedor */
  text-overflow: ellipsis; /* Añade los tres puntos supensivos al final */
}

@media (max-width: 768px) {
  nuestra-clase{
	 width: 300px; /* Definir un ancho si en un dispositivo lo necesita */
	}
}
Click para Copiar
img-11
Copiado

✳️ - Nótese que hemos añadido el media query y que damos un tamaño determinado al contenedor, el contenido o texto ya puede variar en tamaño o fuente, pero nunca sobrepasará el ancho del contenedor además de añadir tres puntos suspensivos al final.

Logo Oxygenados
Texto en Secciones

Ahora nos ponemos en el caso de que lo que tenemos es un contenedor, sea un div, una sección, un párrafo o lo que sea, con un ancho y un alto determinado que contendrá un texto, pero ahora lo que nos interesa es que sea un texto de varias líneas, por jemplo el que tenemos justamente abajo a la izquierda cuyo contenedor tiene unas medidas determinadas y que por las medidas del alto y ancho solo tienen cabida siete líneas, ( en este ejemplo estamos detallando que la vista es un monitor o pantalla de PC o Mac ); pero dinamicamente el texto ha cambiado y lo que antes eran 7 líneas el texto pasa a ser mas grande y pasa a tener 12, el de abajo a la derecha, lo cual provocará un desbordamiento y por motivos estéticos nos rompe el diseño.

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

"Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. Fuga, soluta laudantium. Lorem ipsum dolor sit ametconsectetur adipisicing elit. Dicta assumenda architecto, temporibus ipsam?"

Pues esto se puede controlar añadiendo simplemente cuatro líneas de código CSS, y el resultado aplicado al ejemplo anterior será:

"Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur. Fuga, soluta laudantium. Lorem ipsum dolor sit ametconsectetur adipisicing elit. Dicta assumenda architecto, temporibus ipsam?"

En el que tenemos igualmente el texto con 7 líneas, el contenedor mantiene las medidas exactas y añade los tres puntos suspensivos al final de la séptima línea indicando que no se está mostrando todo el texto. Para comprobarlo puedes inspeccionar el texto y varás como en el inspector de código del navegador si que aparece todo el texto.
El código es:

.nuestra-clase{
  overflow: hidden; 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7; /* Número de líneas a mostrar */
}
Click para Copiar
img-13
Copiado
Logo Oxygenados
Texto en Columnas

Veamos ahora como hacer que un texto se muestre en columnas, sin recurrir a incluir divs o columnas adicionales.
Tenemos el el texto original que manipularemos con CSS inmediatemente debajo y lo vamos a transformar para que se nos muestre en tres columnas en pantallas grandes y en tres columnas en dispositivos móviles. Además separaremos las columnas y se añadirá una línea a tipo de borde que haga de separación y que sigue las reglass CSS de los bordes generales, de px, color y forma( solid, dashed, dotted )

¿Qué es Lorem Ipsum?
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

¿De dónde viene?
Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cicero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32

¿Por qué lo usamos?
Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).

¿Dónde puedo conseguirlo?
Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayoría sufrió alteraciones en alguna manera, ya sea porque se le agregó humor, o palabras aleatorias que no parecen ni un poco creíbles. Si vas a utilizar un pasaje de Lorem Ipsum, necesitás estar seguro de que no hay nada avergonzante escondido en el medio del texto. Todos los generadores de Lorem Ipsum que se encuentran en Internet tienden a repetir trozos predefinidos cuando sea necesario, haciendo a este el único generador verdadero (válido) en la Internet. Usa un diccionario de mas de 200 palabras provenientes del latín, combinadas con estructuras muy útiles de sentencias, para generar texto de Lorem Ipsum que parezca razonable. Este Lorem Ipsum generado siempre estará libre de repeticiones, humor agregado o palabras no características del lenguaje, etc.

El resultado es el siguiente.
(Notar que el texto que termina en la parte baja de una columna y sigue su sentido de lectura en la parte superior de la columna adyacente a la derecha.)

¿Qué es Lorem Ipsum?
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

¿De dónde viene?
Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cicero, escrito en el año 45 antes de Cristo. Este libro es un tratado de teoría de éticas, muy popular durante el Renacimiento. La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32

¿Por qué lo usamos?
Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).

¿Dónde puedo conseguirlo?
Hay muchas variaciones de los pasajes de Lorem Ipsum disponibles, pero la mayoría sufrió alteraciones en alguna manera, ya sea porque se le agregó humor, o palabras aleatorias que no parecen ni un poco creíbles. Si vas a utilizar un pasaje de Lorem Ipsum, necesitás estar seguro de que no hay nada avergonzante escondido en el medio del texto. Todos los generadores de Lorem Ipsum que se encuentran en Internet tienden a repetir trozos predefinidos cuando sea necesario, haciendo a este el único generador verdadero (válido) en la Internet. Usa un diccionario de mas de 200 palabras provenientes del latín, combinadas con estructuras muy útiles de sentencias, para generar texto de Lorem Ipsum que parezca razonable. Este Lorem Ipsum generado siempre estará libre de repeticiones, humor agregado o palabras no características del lenguaje, etc.

Y el código:

.nuestra-clase{
	column-count: 5; /* Nº de columnas */
	column-gap: 50px; /* Separación entre columnas */
	column-rule: 2px dashed #e8a229; /* Bordes */
}

@media (max-width: 768px) {
  nuestra-clase{
   /* En responsive cambiamos la cantidad de columnas
      y la distancia entre ellas */
	column-count: 3;
	column-gap: 30px;
  }
}
Click para Copiar
img-15
Copiado
Logo Oxygenados
0 0 votos
Puntuación
Suscribir
Notificar de
guest
0 Comentarios
Viejos
Nuevos Más votados
Comentarios en línea
Ver todos los comentarios
El diseño web responsivo está muerto

El diseño fluido se refiere a un enfoque de diseño web en el que las dimensiones de los elementos son flexibles, escalando proporcionalmente al tamaño de la pantalla del usuario.
En lugar de medidas fijas de píxeles, utiliza unidades relativas como porcentajes o ems para garantizar que el diseño se ajuste sin problemas, independientemente del dispositivo.

Leer más
Mas Iconos con Vainilla Font

Mostramos como añadir más iconos sin la necesidad de añadir más sets de SVGs, usando la fuente denominada "vanilla" y con la particularidad de que vamos a poder usarlos de manera global en todo nuestro sitio o solo en aquellas páginas o entradas en las que sea necesario.
La diferencia entre usarlos de manera global en todo el sitio o solo en aquellas páginas está en que en la primera manera cargaremos los kb de la fuente, en este caso 79Kb de manera innecesaria en aquellas páginas o entradas donde no requiramos el uso de estos iconos.

Leer más
Subrayado Animado

Un pequeño tip para lograr un efecto de subrayado animado con css y Oxygen

Leer más
eye