CSS3 Texto
CSS3 contém vários novos recursos de texto.
Neste capítulo, você vai aprender sobre as seguintes propriedades de texto:
-
text-overflow -
word-wrap -
word-break
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por O- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 Overflow Texto
O CSS3 text-overflow propriedade especifica como transbordada conteúdo que não é exibido deve ser um sinal para o usuário.
Pode ser rapada;
Esta é uma longa texto que não vai caber na caixa
ou ele pode ser processado como uma reticências (...):
Esta é uma longa texto que não vai caber na caixa
O código CSS é como se segue:
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;
} Tente você mesmo " O exemplo a seguir mostra como você pode exibir o conteúdo transbordada quando paira sobre o elemento:
CSS3 Palavra Embrulho
O CSS3 word-wrap propriedade permite que palavras longas para ser capaz de ser quebrado e enrole para a próxima linha.
Se uma palavra é muito grande para caber dentro de uma área, ele se expande fora:
Este parágrafo contém uma palavra muito longa: thisisaveryveryveryveryveryverylongword . A palavra longa vai quebrar e quebrar para a próxima linha.
A propriedade palavra-wrap permite forçar o texto para embrulhar - mesmo que isso signifique a divisão no meio de uma palavra:
Este parágrafo contém uma palavra muito longa: thisisaveryveryveryveryveryverylongword . A palavra longa vai quebrar e quebrar para a próxima linha.
O código CSS é como se segue:
Exemplo
Permitir palavras compridas para ser capaz de ser quebrado e embrulhar para a próxima linha:
p {
word-wrap: break-word;
}
Tente você mesmo " CSS3 Palavra Quebrando
O CSS3 word-break propriedade especifica regras de linha de ruptura.
Este parágrafo contém algum texto. Esta linha vai-break-at-hífens.
Este parágrafo contém algum texto. As linhas vai quebrar a qualquer personagem.
O código CSS é como se segue:
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 »
Propriedades do texto CSS3
A tabela a seguir lista as novas propriedades de texto CSS3:
| Propriedade | Descrição |
|---|---|
| text-align-last | Especifica como alinhar a última linha de um texto |
| text-emphasis | Um atalho para definir text-ênfase em estilo e um texto-ênfase-color em uma declaração |
| text-justify | Especifica como texto justificado devem ser alinhados e espaçados |
| text-overflow | Especifica o conteúdo como transbordada que não é exibido deve ser um sinal para o usuário |
| word-break | Especifica regras de quebra de linha para scripts não-CJK |
| word-wrap | Permite que palavras longas para ser capaz de ser quebrado e enrole para a próxima linha |