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!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
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.
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.
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.
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.
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.
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.
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.
Já o text-wrap: pretty; apresenta uma compatibilidade de cerca de 70%.
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:
- Descubra as Novas Pseudo-Classes CSS para Melhorar Seu Código
- CSS Nesting – Passo a Passo: Simplifique seus Códigos e Evite Erros
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!
Posts mais recentes de HTML e CSS
- Aprenda Tailwind CSS com apenas uma aula!
Descubra como o Tailwind CSS pode revolucionar o seu desenvolvimento web. Aprenda a usar essa ferramenta que vai elevar o nível do seu front-end. - Configure seu VS Code para HTML e CSS, e conheça outras Tecnologias Full Stack! Aprenda como baixar e configurar o VS Code para HTML e CSS e deixe-o pronto para iniciar o seu desenvolvimento web!
- Guia rápido – Aprenda como usar Bootstrap do Zero Quer criar sites bonitos e responsivos sem complicação? Aprenda como usar Bootstrap, uma ferramenta que te permite criar páginas completas com o mínimo de dificuldade e esforço!
Posts mais recentes da Hashtag Treinamentos
- 5 Boas Práticas de SQL para Iniciantes: Otimize Suas Consultas e Organize Seu Código
Se você está começando com MySQL ou busca melhorar suas habilidades em SQL, este post traz cinco boas práticas de escrita de SQL para iniciantes. - Função SE Excel: Exemplos e Dicas para Uso [Guia] A função SE Excel é muito útil para definir condições e criar uma planilha mais completa e funcional. Confira nesta aula!
- Exercícios de Listening em Inglês – Como Melhorar sua Compreensão Faça estes exercícios de listening em inglês e melhore sua compreensão! Descubra técnicas e estratégias para praticar e evoluir no aprendizado do idioma!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.