Efectos de texto en CSS

Un sitio web consta de varios tipos de contenido, como imágenes, texto, animaciones y muchos más. Además de embellecer el contenido del sitio web, también puede controlar su comportamiento. Esto se puede hacer agregando ciertos efectos utilizando varias propiedades de CSS.

En esta guía, hablaremos sobre cómo puede agregar efectos al texto que aparece en su sitio web.

Empecemos.

Efectos de texto en CSS

Puede agregar efectos en el texto que aparece en las páginas web utilizando las diversas propiedades proporcionadas por CSS. Las propiedades de CSS relacionadas con el texto son las siguientes.

1. Propiedad de texto de texto
2. propiedad de modo de escritura
3. Propiedad de Word-Wrap
4. propiedad de roto de palabras

A continuación hemos discutido cada uno de estos con gran profundidad.

Propiedad de texto de texto

La propiedad de texto-superflujo describe lo que sucede con el texto desbordante que es invisible para el lector. No es una propiedad independiente y debe usarse con espacio blanco: Nowrap y desbordamiento: propiedades ocultas.

Sintaxis

Text-Overflow: Clip | elipsis;

El valor del clip es un valor predeterminado que recorta el texto desbordado, mientras que el valor de ellipsis también recorta el texto y muestra un elipsis o tres puntos en lugar del texto desbordado.

Ejemplo
Este ejemplo demuestra el funcionamiento de la propiedad de texto de texto.

Html

Texto-Overflow: Clip

Este ejemplo demuestra el valor de clip de la propiedad de texto-superflujo.

Texto-Overflow: Ellipsis

Este ejemplo demuestra el valor de ellipsis de la propiedad de texto-upramento de texto.

En el código anterior, simplemente hemos creado dos

elementos y colocados un texto largo en ellos para demostrar el funcionamiento de los valores de la propiedad de texto-superflujo.

CSS

.P1
White-Space: Nowrap;
desbordamiento: oculto;
Text-Overflow: clip;
Ancho: 190px;
borde: 1px negro sólido;

.P2
White-Space: Nowrap;
desbordamiento: oculto;
Texto-Overflow: Ellipsis;
Ancho: 190px;
borde: 1px negro sólido;

P: Hover
desbordamiento: visible;

Para ambos párrafos hemos establecido el espacio blanco propiedad de nower y Desbordamiento propiedad de oculto. Sin embargo, el primero

El elemento muestra el funcionamiento del valor de clip de la propiedad de texto-superflujo y la segunda

El elemento demuestra el valor de ellipsis de la propiedad de texto-superflujo. Además de esto, cada vez que el usuario se cierne sobre los párrafos se mostrará el texto oculto.

Producción

El texto desbordante se maneja utilizando la propiedad de texto-superflujo.

propiedad de modo de escritura

Esta propiedad especifica la dirección del texto que se muestra en las páginas web. Hay dos instrucciones posibles que son horizontales o verticales.

Sintaxis

Modo de escritura: Vertical-LR | vertical-rl | Horizontal-TB | heredar;

El texto se muestra verticalmente utilizando el vertical-lr El valor se lee de izquierda a derecha, verticalmente.
El texto se muestra verticalmente utilizando el vertical-rl El valor se muestra de derecha a izquierda, verticalmente.

Mientras tanto, el valor TB horizontal Muestra el texto horizontalmente de arriba a abajo.

Ejemplo
Considere el ejemplo a continuación.

Html

Ejemplo de TB Horizontal

Ejemplo de vertical-LR

Ejemplo de vertical-RL

Aquí hemos creado tres

elementos para ilustrar el funcionamiento de diferentes valores de modo de escritura.

CSS

pags
borde: 1px negro sólido;
Ancho: 200px;

.tuberculosis
Modo de escritura: Horizontal-TB;
Altura: 160px;

.LR
Modo de escritura: Vertical-LR;
Altura: 160px;

.rl
Modo de escritura: Vertical-RL;
Altura: 160px;

Usando las diversas clases asignadas a cada uno de los

Elemento Estamos estableciendo diferentes modos de escritura para ellos.

Producción

El texto se ha mostrado utilizando varios modos de escritura.

Propiedad de Word-Wrap

Sin embargo, cuando una palabra es demasiado larga, se desborda más allá del área especificada de un elemento, utilizando la propiedad de Word-Wrap, esa palabra se divide y envuelve alrededor de la línea siguiente.

Sintaxis

Word-Wrap: Normal | Break-Word | heredar;

El valor normal divide la palabra en los puntos especificados, mientras que el valor de la palabra de ruptura rompe las palabras irrompibles.

Ejemplo
Considere el siguiente ejemplo para comprender el funcionamiento de la propiedad Word-Wrap.

Html

Sin propiedad de Word-Wrap

El contenido de este párrafo es
VeeeeeErrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyYy

Con Word-Wrap: Break-Word;

El contenido de este párrafo es
VeeeeeErrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyYy

Aquí hemos creado dos

elementos y colocadas algunas palabras largas en ellos.

CSS

.P1
Ancho: 11em;
borde: 2px Solid #000000;

.P2
Ancho: 11em;
borde: 2px negro sólido;
Word-Wrap: Break-Word;

En el código anterior, estamos dando ambos

elementos algún ancho y borde y también estamos aplicando la propiedad de la palabra envoltura en la segunda

elemento.

Producción

La propiedad Word-Wrap funciona correctamente.

propiedad de roto de palabras

La propiedad de la palabra break maneja cómo las palabras deben dividirse al final de una línea.

Sintaxis

Word Break: Keep-thol | quiebre | Normal | heredar;

El valor de mantenimiento todo divulgada una palabra de manera predeterminada, mientras que el valor de quiebre divide las palabras en puntos aleatorios para evitar el desbordamiento.

Ejemplo
Considere el ejemplo a continuación para comprender el funcionamiento de la propiedad de Break Break.

Html

Break de palabras: mantener todo;

Efectos de texto de aprendizaje en CSS

Descanso de palabras: quiebre;

Efectos de texto de aprendizaje en CSS

Aquí simplemente hemos creado dos

elementos y colocar algo de contenido en ellos.

CSS

.P1
Ancho: 120px;
borde: 2px Solid #000000;
Break de palabras: mantener todo;

.P2
Ancho: 120px;
borde: 2px Solid #000000;
Descanso de palabras: quiebre;

Al primer párrafo se le ha asignado el valor de Keep-All, mientras que al segundo párrafo se le ha asignado el valor de quiebre.

Producción

Los diferentes valores de la propiedad de descanso de palabras se verifican y funcionan correctamente.

Conclusión

Puede agregar efectos en el texto que aparece en las páginas web utilizando las propiedades proporcionadas por CSS, como la propiedad de texto-superflujo, la propiedad de modo de escritura, la propiedad Word-Wrap y la propiedad de Break Word. La propiedad de texto-upuario de texto describe lo que sucede con el texto desbordante, la propiedad del modo de escritura especifica la dirección del texto, la propiedad de Word-Wrap divide palabras y envuelta alrededor de la línea siguiente, y la propiedad de descanso de palabras maneja cómo las palabras deben dividirse Al final de una línea. Todas estas propiedades se explican en profundidad en esta guía junto con relevante