Matricule-se
Voltar para o blog
HTML e CSS

Nova Propriedade Text-Wrap no CSS – Você Precisa Conhecer!

Diego Monutti

Você já conhece a nova propriedade text-wrap no CSS? Aprenda como utilizá-la para melhorar a visualização e a quebra de texto nas suas páginas!

A propriedade text-wrap do CSS controla como o texto quebra linha: text-wrap: balance equilibra o comprimento das linhas — ideal para títulos —, e text-wrap: pretty melhora a quebra dos parágrafos, evitando palavras órfãs na última linha. Dois valores simples que dão acabamento tipográfico profissional à página.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: O vídeo apresenta a propriedade text-wrap do CSS, com dois valores: balance, que equilibra as linhas de títulos evitando palavras soltas, e pretty, que evita a palavra órfã no fim de parágrafos. Cita o suporte de cada um no Can I Use, 84,62% e 71,1%, e diz que navegador sem suporte apenas ignora a propriedade.

Neste vídeo (9 min):

  • 1:00 - A propriedade nova, text-wrap, controla como o texto quebra linha, tanto em títulos quanto em parágrafos
  • 1:30 - Sem a propriedade, ao reduzir o espaço disponível, o navegador quebra a linha do jeito que acha melhor, deixando às vezes uma única palavra sozinha na última linha
  • 3:00 - text-wrap: balance equilibra o comprimento das linhas de um título, sem deixar uma ou duas palavras soltas, e evita criar breakpoints manuais para cada tamanho de tela
  • 4:00 - text-wrap: balance só funciona bem em textos de até seis linhas: usar em parágrafos grandes prejudica a performance da página
  • 5:00 - Para parágrafos, a propriedade indicada é text-wrap: pretty, que evita a palavra órfã, aquela que sobra sozinha na última linha
  • 5:30 - text-wrap: pretty reorganiza as últimas quatro linhas do parágrafo para nunca deixar uma palavra órfã
  • 6:00 - No Can I Use, text-wrap: balance tinha 84,62% de suporte entre os navegadores no momento da gravação
  • 7:00 - Recomendação de uso por faixa de suporte no Can I Use: acima de 90% pode usar sem preocupação, entre 84% e 90% já dá para testar em projetos pessoais
  • 7:30 - text-wrap: pretty tinha suporte um pouco menor, de 71,1%, no momento da gravação
  • 8:00 - Em navegador sem suporte, a propriedade é simplesmente ignorada: a página não quebra, só fica menos refinada

Trechos do vídeo:

  • text-wrap: balance equilibra o comprimento das linhas de um título ou subtítulo, evitando que uma ou duas palavras fiquem sozinhas na última linha, sem precisar criar breakpoints para cada tamanho de tela
  • text-wrap: pretty evita a palavra órfã, aquela que sobra sozinha na última linha de um parágrafo, reorganizando as últimas quatro linhas do texto
  • text-wrap: balance funciona bem só em textos de até seis linhas: usar em parágrafos grandes prejudica a performance da página
  • Em um navegador sem suporte à propriedade, o CSS simplesmente ignora a declaração de text-wrap, e a página não quebra, só fica com a quebra de linha menos refinada

Para receber o(s) arquivo(s) utilizados na aula, preencha seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento

Nova Propriedade Text-Wrap no CSS – Você Precisa Conhecer!

O CSS está em constante atualização, trazendo melhorias e novas propriedades que facilitam e aprimoram o desenvolvimento web.

Uma das últimas novidades que merece destaque é a nova propriedade text-wrap. Essa funcionalidade resolve, de maneira simples e eficiente, alguns problemas comuns de layout e quebra de texto em páginas da web.

 Nesta aula, vamos explorar como a propriedade text-wrap pode ser utilizada para melhorar a apresentação de títulos e parágrafos, garantindo que as palavras fiquem bem distribuídas e organizadas, proporcionando uma experiência visual mais agradável.

O Problema da Quebra de Texto

Ao desenvolvermos uma página web, é comum que o texto se comporte de maneiras indesejadas quando o tamanho da tela é alterado. Sem as propriedades adequadas, o navegador decide automaticamente onde a quebra de linha deve ocorrer.

Isso pode resultar em linhas de texto muito longas ou em palavras isoladas em linhas separadas, o que compromete a experiência visual do usuário e deixa a página com um aspecto desorganizado e desequilibrado.

Problema na Quebra de Texto

Nesse caso, seria necessário criar breakpoints manualmente para ajustar tamanhos de fonte e a largura máxima do texto, tornando o processo de deixar o conteúdo balanceado e harmonioso bastante trabalhoso.

O que é a Propriedade Text-Wrap? O que ela faz?

A nova propriedade text-wrap no CSS vem para solucionar esse problema de quebra de texto. Como o nome sugere, o termo “wrap” refere-se à forma como o texto é “embrulhado” ou, mais precisamente, como as quebras de linha são gerenciadas.

Essa propriedade permite melhorar a apresentação tanto de títulos quanto de parágrafos, ajustando automaticamente a formatação desses elementos.

Ícone HTML e CSSHTML e CSS Impressionador

Você vai aprender não só os fundamentos básicos, intermediários e avançados de HTML e CSS, como também vai aprender a integrar com os principais frameworks. Além disso, você vai sair do curso com um portfólio de projetos completo!

Começar agoraSeta para a direita
Fundo HTML e CSSTelas HTML e CSS

A propriedade text-wrap oferece dois principais valores que veremos nesta aula:

  • text-wrap: balance;: Equilibra a distribuição do texto entre as linhas, garantindo uma disposição mais harmônica das palavras.
  • text-wrap: pretty;: Organiza o texto em parágrafos longos, evitando que palavras fiquem sozinhas em uma linha (conhecidas como “palavras órfãs”).

Como Usar o text-wrap: balance;

O valor balance da propriedade text-wrap é ideal para títulos ou blocos curtos de texto. O objetivo dessa opção é balancear o conteúdo, de forma que ele não fique distribuído de maneira desigual entre as linhas disponíveis.

Para aplicá-lo, abra o arquivo CSS, disponível no material para download, e aplique a propriedade text-wrap: balance; ao seletor do título h1.

CSS
h1 {
  max-width: 60%;
  text-wrap: balance;
}

Com essa configuração, o título será dividido uniformemente entre as linhas, melhorando a legibilidade e a estética do conteúdo.

text-wrap: balance;

Perceba que, mesmo em telas menores, as palavras não ficam isoladas, o que torna o layout mais fluido e harmonioso, sem a necessidade de ajustes manuais em várias propriedades.

Observação: Ao utilizar a propriedade text-wrap: balance;, é importante aplicá-la principalmente em títulos ou blocos curtos de texto. Quando aplicada a textos que ultrapassam seis linhas, o desempenho da página pode ser prejudicado.

Como Usar o text-wrap: pretty;

Para parágrafos maiores, podemos utilizar a propriedade text-wrap: pretty;. Essa opção foi pensada para ajustar textos longos, garantindo que não haja palavras órfãs, o que melhora a leitura do conteúdo na página.

Para aplicar essa propriedade, basta inserir text-wrap: pretty; no seletor de parágrafo dentro do arquivo CSS.

CSS
p {
  max-width: 40%;
  text-wrap: pretty;
}

Com isso, o parágrafo será quebrado de forma mais natural e organizada, evitando que palavras fiquem isoladas em uma linha.

text-wrap: pretty;

Essa abordagem confere uma aparência mais limpa e profissional à sua página, melhorando a legibilidade do conteúdo e proporcionando uma experiência mais agradável para o usuário.

O text-wrap: pretty; é excelente para ajustar parágrafos longos, mantendo a consistência da quebra de linhas na página.

Verificando a Compatibilidade do text-wrap

Ao considerar o uso de novas funcionalidades no CSS, é essencial verificar a compatibilidade delas com diferentes navegadores.

Nem todos os browsers suportam imediatamente as novidades do CSS, por isso, é recomendado checar o nível de suporte antes de implementar.

O site Can I Use é uma ferramenta muito útil para verificar essa compatibilidade. Basta inserir o nome da funcionalidade que você deseja usar e consultar as versões dos navegadores que a suportam.

Atualmente, o text-wrap: balance; tem uma compatibilidade de 84% dos navegadores.

Compatibilidade do text-wrap: balance;

Já o text-wrap: pretty; apresenta uma compatibilidade de cerca de 70%.

Compatibilidade do text-wrap: pretty;

Na parte inferior do site Can I Use, você pode visualizar as diferentes versões dos navegadores que aceitam ou não essas propriedades, além de conferir notas e feedbacks da comunidade de desenvolvedores.

Para que uma propriedade seja considerada viável para uso em produção, é recomendável que tenha uma aceitação superior a 90%. Isso garante suporte na maioria dos navegadores.

Entretanto, funcionalidades com uma aceitação próxima de 85% já podem ser utilizadas, pois a tendência é que os navegadores sejam atualizados e passem a suportá-las.

Se o navegador não oferecer suporte a uma propriedade, ele simplesmente a ignorará, sem quebrar a página. No entanto, o layout e o design planejados podem não ser exibidos como esperado, o que torna fundamental você verificar a compatibilidade.

Conheça outras novidades do CSS e veja como implementá-las nessas aulas:

Perguntas frequentes

1. O que faz o text-wrap: balance?

Ele redistribui as palavras para que as linhas fiquem com comprimentos parecidos, eliminando aquele título com a primeira linha cheia e a segunda com uma palavra só. Por ter custo de cálculo, os navegadores o aplicam a blocos curtos — perfeito para headlines de até poucas linhas.

2. O que faz o text-wrap: pretty?

Ele melhora a quebra do texto corrido, principalmente evitando órfãs — a palavra solitária na última linha do parágrafo. O navegador avalia as quebras do bloco e ajusta o final para uma leitura mais agradável, com custo maior de processamento que o padrão.

3. Posso usar text-wrap em produção?

Sim, como aprimoramento progressivo: os navegadores modernos (Chrome, Edge, Firefox e Safari em versões recentes) suportam balance, e o pretty está presente nos baseados em Chromium e chegando aos demais. Onde não houver suporte, o texto quebra do jeito tradicional — nada quebra na página.

4. Qual a diferença entre text-wrap e overflow-wrap?

São problemas diferentes: text-wrap decide a distribuição das quebras entre as linhas (estética do bloco); overflow-wrap (e word-break) decide se uma palavra comprida demais pode ser partida para não estourar o contêiner. Em layouts caprichados, os dois convivem.

Conclusão – Nova Propriedade Text-Wrap no CSS – Você Precisa Conhecer!

As propriedades text-wrap: balance; e text-wrap: pretty; representam avanços importantes no CSS, oferecendo uma maneira mais simples e eficiente de controlar a quebra de texto em páginas web.

Nessa aula, você aprendeu como usá-las para melhorar a aparência e a legibilidade do conteúdo sem a necessidade de ajustes manuais complexos.

Embora ainda não sejam suportadas por 100% dos navegadores, você já pode experimentar e aplicar essas propriedades gradualmente em seus projetos. Elas, com certeza, melhorarão a experiência do usuário ao interagir com sua página.

Para continuar aprendendo sobre HTML e CSS e criar projetos cada vez mais poderosos e profissionais, confira o nosso Curso Completo HTML e CSS Impressionador e destaque-se no mercado de trabalho!

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!

Quer aprender mais sobre JavaScript com um minicurso básico gratuito?

Posts mais recentes de HTML e CSS

Posts mais recentes da Hashtag Treinamentos

Diego Monutti

Autor do artigo

Diego Monutti

Analista de Operações e Especialista em Python

Analista de Operações e SEO, além de redator técnico na Hashtag Treinamentos, onde produz conteúdos sobre dados, IA, programação e produtividade. Pós-graduando em Ciência de Dados e Inteligência Artificial pela Universidade Tecnológica Federal do Paraná (UTFPR), com foco em Business Intelligence, Machine Learning, MLOps e Big Data.

Ver mais posts