Efeitos de texto em CSS

Um site consiste em vários tipos de conteúdo, como imagens, texto, animações e muito mais. Além de embelezar o conteúdo do site, você também pode controlar seu comportamento. Isso pode ser feito adicionando certos efeitos usando várias propriedades CSS.

Neste guia, falaremos sobre como você pode adicionar efeitos ao texto que aparece em seu site.

Vamos começar.

Efeitos de texto em CSS

Você pode adicionar efeitos no texto que aparece nas páginas da web usando as várias propriedades fornecidas pelo CSS. As propriedades CSS relacionadas ao texto são as seguintes.

1. Propriedade do Overflow Text-Overflow
2. Propriedade do modo de escrita
3. Propriedade de Word-Wrap
4. Propriedade do Word-Break

Abaixo, discutimos cada um deles em grande profundidade.

Propriedade do Overflow Text-Overflow

A propriedade Text-Overflow descreve o que acontece com o texto transbordante que é invisível para o leitor. Não é uma propriedade independente e deve ser usada com espaço em branco: Nowrap e Overflow: Propriedades ocultas.

Sintaxe

Fluxo de text-overflow: clipe | elipse;

O valor do clipe é um valor padrão que prende o texto transbordado, enquanto que o valor elipsis também prende o texto e mostra uma elipse ou três pontos no lugar do texto transbordado.

Exemplo
Este exemplo demonstra o funcionamento da propriedade Text-Overflow.

Html

Fluxo de texto: clipe

Este exemplo demonstra o valor do clipe da propriedade Text-Overflow.

Fluxo de text-overflow: elipsis

Este exemplo demonstra o valor elipse da propriedade Text-Overflow.

No código acima, simplesmente criamos dois

elementos e colocou algum texto longo neles para demonstrar o funcionamento de ambos os valores da propriedade Text-Overflow.

CSS

.P1
Espaço branco: Nowrap;
estouro: oculto;
Fluxo de texto: clipe;
Largura: 190px;
borda: 1px preto sólido;

.p2
Espaço branco: Nowrap;
estouro: oculto;
Fluxo de text-overflow: elipsis;
Largura: 190px;
borda: 1px preto sólido;

P: Hover
transbordamento: visível;

Para ambos os parágrafos, definimos o espaço branco propriedade para Nowrap e transbordar propriedade para escondido. No entanto, o primeiro

elemento mostra o funcionamento do valor do clipe da propriedade Text-overflow e o segundo

Elemento demonstra o valor de elipsis da propriedade Text-Overflow. Além disso, toda vez que o usuário paira sobre os parágrafos, o texto oculto será mostrado.

Saída

O texto transbordante está sendo tratado usando a propriedade Text-Overflow.

Propriedade do modo de escrita

Esta propriedade especifica a direção do texto exibido nas páginas da web. Existem duas direções possíveis que são horizontais ou verticais.

Sintaxe

Modo de escrita: vertical-LR | vertical-rl | horizontal-tb | herdar;

O texto exibido verticalmente usando o vertical-lr O valor é lido da esquerda para a direita, verticalmente.
O texto exibido verticalmente usando o vertical-rl O valor é exibido da direita para a esquerda, verticalmente.

Enquanto isso, o valor horizontal-tb Exibe o texto horizontalmente de cima para baixo.

Exemplo
Considere o exemplo abaixo.

Html

Exemplo de TB horizontal

Exemplo de vertical-LR

Exemplo de vertical-rl

Aqui nós criamos três

elementos para ilustrar o funcionamento de diferentes valores do modo de escrita.

CSS

P
borda: 1px preto sólido;
Largura: 200px;

.tb
Modo de escrita: horizontal-TB;
Altura: 160px;

.LR
Modo de escrita: vertical-LR;
Altura: 160px;

.rl
Modo de escrita: vertical-rl;
Altura: 160px;

Usando as várias classes atribuídas a cada um dos

Elemento estamos definindo diferentes modos de escrita para eles.

Saída

O texto foi exibido usando vários modos de escrita.

Propriedade de Word-Wrap

Quando uma palavra é muito longa, ela transborda além da área especificada de um elemento, no entanto, usando a propriedade Word-Wrap That Word é dividida e enrolada na próxima linha.

Sintaxe

Enrolamento de palavras: Normal | palavra de descanso | herdar;

O valor normal divide a palavra em pontos especificados, enquanto isso, o valor da palavra de quebra quebra as palavras inquebráveis.

Exemplo
Considere o exemplo abaixo para entender o funcionamento da propriedade Word-Wrap.

Html

Sem propriedade de wap-wrap

O conteúdo deste parágrafo é
veeeeeerrrrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyye loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

Com enbrágio de palavras: palavra de break;

O conteúdo deste parágrafo é
veeeeeerrrrrrrryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyye loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

Aqui nós criamos dois

elementos e colocou algumas palavras longas neles.

CSS

.P1
largura: 11em;
Fronteira: 2px Solid #000000;

.p2
largura: 11em;
borda: 2px preto sólido;
Word-wrap: Break-Word;

No código acima, estamos dando os dois

elementos alguma largura e fronteira e também estamos aplicando a propriedade Word-Wrap no segundo

elemento.

Saída

A propriedade Word-Wrap está funcionando corretamente.

Propriedade do Word-Break

A propriedade da palavra-break lida com como as palavras devem se dividir no final de uma linha.

Sintaxe

Break Word: Keep-All | Break-All | Normal | herdar;

O valor de Keep-All divide uma palavra de maneira padrão, enquanto que o valor de invasão divide as palavras em pontos aleatórios para evitar transbordar.

Exemplo
Considere o exemplo abaixo para entender o funcionamento da propriedade da palavra.

Html

Break Word: Keep-All;

Aprendendo efeitos de texto em CSS

Break Word: Break-All;

Efeitos da LearningText em CSS

Aqui nós simplesmente criamos dois

elementos e colocou algum conteúdo neles.

CSS

.P1
Largura: 120px;
Fronteira: 2px Solid #000000;
Break Word: Keep-All;

.p2
Largura: 120px;
Fronteira: 2px Solid #000000;
Break Word: Break-All;

O primeiro parágrafo foi atribuído ao valor de manter tudo, enquanto isso, o segundo parágrafo foi atribuído ao valor de invasão.

Saída

Os diferentes valores da propriedade de quebra de palavras são verificados e funcionando corretamente.

Conclusão

Você pode adicionar efeitos sobre o texto que aparece nas páginas da web usando as propriedades fornecidas por CSS como propriedade de text-overflow, propriedade de moda de escrita, propriedade-wap-wrap e propriedade de break word. A propriedade Text-Overflow descreve o que acontece com o texto transbordando, a propriedade de moda de escrita especifica a direção do texto, a propriedade Word-Wrap divide palavras e envolvida na próxima linha, e a propriedade de break word lida com como as palavras devem se dividir No final de uma linha. Todas essas propriedades são explicadas em profundidade neste guia, juntamente com