Efeito de Texto do CSS

Sobrecarga de texto CSS, quebra de palavras completa, regras de quebra de linha e modo de escrita

Nesta seção, você aprenderá as seguintes propriedades:

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

Sobrecarga de texto CSS

CSS text-overflow A propriedade define como o conteúdo de overflow não exibido deve ser apresentado ao usuário.

Pode ser cortado:

Este é um texto longo que não pode ser contido na caixa. Este é um texto longo que não pode ser contido na caixa

Também pode ser apresentado como pontos de interrogação (…):

Este é um texto longo que não pode ser contido na caixa. Este é um texto longo que não pode ser contido na caixa

O código CSS é o seguinte:

Exemplo

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}
p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

Experimente você mesmo

Os seguintes exemplos mostram como o conteúdo excedente é exibido quando o mouse é colocado sobre o elemento:

Exemplo

div.test:hover {
  overflow: visible;
}

Experimente você mesmo

Quebra de palavra do CSS (Word Wrapping)

CSS word-wrap A propriedade permite que textos longos sejam quebrados e continuados na próxima linha.

Se uma palavra for muito longa e não couber em uma área, ela se estenderá para fora:

Este parágrafo contém uma palavra muito longa: thisisaveryveryveryveryveryverylongword. A longa palavra quebrará e se estenderá para a próxima linha.

Através da propriedade word-wrap, você pode forçar que o texto seja quebrado em linha - mesmo que isso signifique dividir a palavra no meio:

Este parágrafo contém uma palavra muito longa: thisisaveryveryveryveryveryverylongword. A longa palavra quebrará e se estenderá para a próxima linha.

O código CSS é o seguinte:

Exemplo

Permite que palavras longas sejam quebradas e quebradas na próxima linha:

p {
  word-wrap: break-word;
}

Experimente você mesmo

Regras de quebra de linha do CSS

CSS word-break A propriedade especifica as regras de quebra de linha.

Este parágrafo contém alguns textos. Esta linha quebrará em hífen:

Este parágrafo contém alguns textos. Esta linha quebrará em hífen.

Este parágrafo contém alguns textos. Essas linhas quebrarão em qualquer caractere:

Este parágrafo contém alguns textos. As linhas quebrarão em qualquer caractere.

O código CSS é o seguinte:

Exemplo

p.test1 {
  word-break: keep-all;
}
p.test2 {
  word-break: break-all;
}

Experimente você mesmo

Modo de escrita do CSS

CSS writing-mode A propriedade determina se a linha de texto é horizontal ou vertical.

Alguns textos com um elemento span com uma vertical-rl writing-mode.

Os seguintes exemplos mostram diferentes modos de escrita:

Exemplo

p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: vertical-rl; 
}

Experimente você mesmo

Propriedades de efeito de texto do CSS

A tabela a seguir lista as propriedades de efeito de texto do CSS:

Atributo Descrição
text-align-last Especificar como a última linha do texto deve ser alinhada.
text-justify Especificar como o texto alinhado deve ser alinhado e espaçado.
text-overflow Especificar como o conteúdo excedente não exibido deve ser apresentado ao usuário.
word-break Especificar as regras de quebra de linha para scripts não CJK.
word-wrap Permitir que palavras longas sejam quebradas e passadas para a próxima linha.
writing-mode Especificar se a linha de texto deve ser horizontal ou vertical.