23.11.2024

CSS Overflow: Exibindo uma Linha de Texto Sem Quebra

Resposta Rápida

Se você precisa estilizar o CSS para um texto em uma linha onde o excesso é oculto e substituído por reticências, utilize os seguintes estilos:

.single-line-text {
  white-space: nowrap; /* Sem quebra */
  overflow: hidden; /* Oculta o excesso */
  text-overflow: ellipsis; /* Adiciona reticências */
  width: 100%; /* Se estende na largura disponível */
}

<div class="single-line-text">Aqui está um texto longo que será exibido em uma linha.</div>

A propriedade white-space: nowrap; impede que o texto quebre, overflow: hidden; oculta o texto que não cabe dentro do elemento, e text-overflow: ellipsis; adiciona reticências para indicar que há mais texto oculto.

Aprofundando: Principais Conceitos em CSS

Exibindo Texto em Uma Linha

white-space: nowrap; mantém o texto em uma única linha sem quebras. Utilize essa propriedade para preservar a integridade do texto mesmo quando seu comprimento excede a largura do contêiner.

Controlando o Excesso: Como Ocultar Texto

overflow: hidden; oculta o texto que excede o tamanho do elemento, tornando-o inacessível. Considere o impacto dessa configuração na percepção do usuário, dependendo do contexto.

Largura em Relação aos Limites do Contêiner

A propriedade width: 100%; garante que a largura do texto se adapte ao elemento pai e mude responsivamente conforme seu tamanho muda.

Dica: Você pode definir a largura em pixels para alcançar um resultado de design específico!

Indicação Clara de Texto Oculto

A propriedade text-overflow: ellipsis; adiciona reticências, sinalizando a presença de texto oculto e mantendo o interesse nesse conteúdo.

Analisando o Comportamento do Excesso em Diversos Contextos

Compatibilidade e Variedade de Conteúdo

Para garantir a exibição de texto em uma linha com reticências em condições complexas, você pode tomar as seguintes medidas:

• Largura Responsiva: Ajuste a largura do texto usando media queries para acomodar diferentes dispositivos.
• Conteúdo Dinâmico: Utilize JavaScript para gerenciar os tamanhos de conteúdo conforme mudam.
• Recorte de Texto: Use text-overflow: clip; para um recorte simples de texto sem reticências.
• Especificidades do Firefox: Certifique-se de que text-overflow é tratado corretamente no Firefox e tente -webkit-line-clamp em navegadores baseados em WebKit, pois o suporte pode variar.

Estilização e Posicionamento do Bloco de Texto

Considere cuidadosamente a estilização e o posicionamento do contêiner de texto na página:

• Altura Fixa: Defina a altura do contêiner igual à line-height ou ao tamanho do texto.
• Floats e Padding: Utilize propriedades e espaçamentos adequados para um layout apropriado dos elementos.

Visualização

Você pode relacionar o texto excedente a uma fila de pessoas esperando para entrar em um show:

Fila:        [🚪]
Pessoas:     "👯‍♂️👯‍♀️👯👯‍♂️"

.css-fila {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Resultado da aplicação do CSS: [🚪👯‍♂️...]
                - Apenas um par já está curtindo a música!

Portanto, na "fila de uma linha", apenas parte dela é visível, enquanto os outros permanecem em uma posição secundária.

Quando o CSS Não é Suficiente

Incorporando JavaScript para um Controle Aprimorado

Se você precisar de mais funcionalidade do que o CSS pode fornecer, o JavaScript pode medir a largura do conteúdo e aplicar estilos adequados dinamicamente.

Responsividade e Interatividade

O JavaScript pode monitorar alterações no tamanho da janela do navegador e ajustar adaptativamente os parâmetros de excesso no contêiner, garantindo que o design seja responsivo.

Links Úteis

1. text-overflow - CSS: Folhas de Estilo em Cascata | MDN — Guia abrangente sobre a propriedade text-overflow.
2. Recortando uma string com reticências | CSS-Tricks — Exemplos de como recortar texto em uma linha com reticências.
3. Flexbox para recortar texto | CSS-Tricks — Discussão sobre como lidar com o excesso de texto usando flexbox.
4. overflow - Referência CSS — Referência visual demonstrando a propriedade overflow.
5. Aprendendo CSS: Folha de Dicas do Box Model | Codecademy — Guia sobre o box model em CSS e gerenciamento de overflow.
6. overflow-wrap - CSS: Folhas de Estilo em Cascata | MDN — Instruções sobre como usar a propriedade overflow-wrap.

Video

Navigation