Propriedade de estouro de texto CSS
Exemplo
Uso da propriedade text-overflow:
div
{
white-space: nowrap;
overflow:
hidden;
text-overflow: ellipsis;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A text-overflowpropriedade especifica como o conteúdo estourado que não é exibido deve ser sinalizado ao usuário. Ele pode ser recortado, exibir reticências (...) ou exibir uma string personalizada.
Ambas as propriedades a seguir são necessárias para estouro de texto:
- espaço em branco: nowrap;
- estouro: oculto;
| Valor padrão: | grampo |
|---|---|
| Herdado: | não |
| Animavel: | não. Leia sobre animáveis |
| Versão: | CSS3 |
| Sintaxe JavaScript: | objeto .style.textOverflow="ellipsis" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Números seguidos por -o- especificam a primeira versão que funcionou com um prefixo.
| Property | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
Sintaxe CSS
text-overflow: clip|ellipsis|string|initial|inherit;
Valores de propriedade
| Value | Description | Play it |
|---|---|---|
| clip | Default value. The text is clipped and not accessible | |
| ellipsis | Render an ellipsis ("...") to represent the clipped text | |
| string | Render the given string to represent the clipped text | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Mais exemplos
Exemplo
Estouro de texto com um efeito de foco (mostre o texto inteiro ao passar o mouse):
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
Páginas relacionadas
Tutorial CSS: Efeitos de texto CSS
Referência HTML DOM: propriedade textOverflow