Como limitar o texto em CSS?

Quando se trata de design de sites, controlar a apresentação do texto é fundamental para manter um layout organizado e visualmente agradável.

Duas propriedades CSS que são especialmente úteis para essa tarefa são white-space e text-overflow. Neste artigo, vamos explorar como você pode usar essas propriedades para limitar o espaço ocupado pelo texto em seus projetos.

Entendendo o white-space

A propriedade white-space no CSS controla como o espaço em branco dentro de um elemento é tratado. Aqui estão alguns dos valores mais comuns que você pode usar:

• normal: O navegador colapsa os espaços em branco e quebra linhas automaticamente, conforme necessário.
• nowrap: O texto é exibido em uma única linha, e o espaço em branco é colapsado.
• pre: O texto preserva espaços e quebras de linha, semelhante ao comportamento do elemento <pre>.
• pre-wrap: O texto preserva espaços e quebras de linha, mas ainda quebra linhas automaticamente conforme necessário.
• pre-line: O texto quebra em linhas conforme necessário e preserva quebras de linha, mas os espaços em branco são colapsados.

Usando text-overflow

A propriedade text-overflow é utilizada para adicionar elipses ou outros indicadores visuais quando o texto de um elemento excede a largura definida. Esta propriedade funciona apenas em elementos que têm overflow diferente de visible e white-space configurado para nowrap.

Os valores mais comuns são:

• clip: O texto que excede a área é simplesmente cortado, sem indicação visual.
• ellipsis: Adiciona três pontos (…) no final do texto quando este ultrapassa o limite do elemento.

Exemplo prático em vídeo

Assista o vídeo aqui

Benefícios de Usar white-space e text-overflow

• Melhoria na Usabilidade: Ajuda a garantir que o conteúdo seja legível e não ultrapasse os limites do layout.
• Estética: Mantém o design do site limpo e organizado.
• Flexibilidade: Pode ser combinado com outras propriedades CSS para criar designs responsivos.

Conclusão

Controlar como o texto é exibido no seu site é crucial para uma boa experiência do usuário. Usar white-space e text-overflow são técnicas eficazes para limitar o espaço ocupado pelo texto e manter seu layout limpo e profissional. Experimente essas propriedades em seu próximo projeto e veja a diferença que elas podem fazer.