8.1 Propriedade text-overflow
A envoltura de texto e o controle de como ele é exibido são aspectos importantes do design web, especialmente ao lidar com linhas longas de texto ou contêineres com tamanho restrito. As propriedades text-overflow, white-space e word-wrap (agora conhecida como overflow-wrap) permitem controlar como o texto se comporta nessas situações.
A propriedade text-overflow controla como o texto que excede as bordas do contêiner é exibido. Ela é usada em combinação com as propriedades white-space e overflow para criar o efeito de corte do texto e a adição de reticências.
Valores:
clip: corta o texto que ultrapassa as bordas do contêinerellipsis: adiciona reticências (...) no final do texto cortado
Exemplo de uso:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
<body>
<div class="container clip">Este texto será cortado na borda do contêiner.</div>
<div class="container ellipsis">Este texto será cortado e substituído por reticências.</div>
</body>
8.2 Propriedade white-space
A propriedade white-space controla o tratamento de espaços em branco e quebras de linha. Ela permite definir como espaços, tabulações e novas linhas são manipulados no texto.
Valores:
normal: espaços e quebras de linha são tratados normalmente (padrão)nowrap: o texto é exibido em uma linha, sem quebraspre: espaços e quebras de linha são preservados, como na tag HTML<pre>pre-wrap: espaços e quebras de linha são preservados, mas o texto pode ser quebrado em uma nova linha conforme necessáriopre-line: quebras de linha são preservadas, mas os espaços são tratados como de costumebreak-spaces: espaços e quebras de linha são preservados, e espaços longos podem causar quebras de linha
Exemplo de uso:
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
<body>
<div class="normal">Este texto será quebrado em uma nova linha se não houver espaço suficiente.</div>
<div class="nowrap">Este texto não será quebrado em uma nova linha e será exibido numa linha só.</div>
<div class="pre">
Este texto vai manter
todos os espaços e quebras de linha.
</div>
<div class="pre-wrap">
Este texto será quebrado em uma nova linha, mas também manterá
todos os espaços e quebras de linha.
</div>
</body>
8.3 Propriedade overflow-wrap
A propriedade overflow-wrap (anteriormente conhecida como word-wrap) controla a quebra de palavras que ultrapassam os limites do contêiner. Ela permite evitar que o contêiner transborde com palavras longas que não podem ser divididas em partes.
Valores
normal: a quebra de palavras é realizada de acordo com as regras padrãobreak-word: a quebra de palavras é realizada mesmo que isso exija dividir a palavra em partes
Exemplo de uso:
.container {
width: 200px;
border: 1px solid #000;
}
.normal {
overflow-wrap: normal;
}
.break-word {
overflow-wrap: break-word;
}
<body>
<div class="container normal">Este texto será quebrado em uma nova linha se não houver espaço suficiente.</div>
<div class="container break-word">EstaPalavralongaNAOseráquebradaNoMeioSeNaoHouver espaçoSuficiente.</div>
</body>
Explicação do código:
overflow-wrap: normal;: a quebra de palavras é realizada de acordo com as regras padrão, sem dividir palavrasoverflow-wrap: break-word;: palavras longas serão quebradas e transferidas para a próxima linha, se necessário
8.4 Uso conjunto de propriedades
As propriedades text-overflow, white-space e word-wrap são frequentemente usadas juntas para alcançar o efeito desejado de exibição de texto em contêineres de tamanho limitado.
Exemplo de uso:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
border: 1px solid #000;
}
<body>
<div class="container">Este texto será cortado e substituído por reticências, se não houver espaço suficiente no contêiner.</div>
</body>
Explicação do código:
white-space: nowrap;: texto é exibido numa linha só, sem quebraoverflow: hidden;: esconde texto que ultrapassa as bordas do contêinertext-overflow: ellipsis;: adiciona reticências no final do texto cortadooverflow-wrap: break-word;: quebra palavras longas, se não houver espaço suficiente
GO TO FULL VERSION