10.01.2025

Como Forçar a Quebra de Texto Dentro de uma Célula de Tabela CSS?

Resposta Rápida

Para conseguir a quebra de texto dentro de um <td>, aplique as seguintes regras de CSS:

td {
  overflow-wrap: break-word;
  word-break: break-word;
}

A propriedade overflow-wrap lida com a quebra de palavras que excedem os limites do elemento, enquanto a propriedade word-break: break-word oferece opções adicionais para a quebra.

Aqui está um exemplo:

<style>
  td {
    overflow-wrap: break-word;
    word-break: break-word;
  }
</style>

<table>
  <tr>
    <td>PalavraMuitoLongaSemEspacosProntaParaQuebrar</td>
    <td>Diferente da anterior, o texto normal irá quebrar naturalmente!</td>
  </tr>
</table>

Agora, até palavras excessivamente longas serão quebradas corretamente, garantindo uma tabela organizada e legível.

Detalhes: Nuances da Quebra

Definindo o Layout da Tabela e Limitando a Largura das Células

Estabeleça um layout de tabela fixo com larguras de célula especificadas para um controle mais fino:

table {
  table-layout: fixed;
  width: 100%; /* Ou qualquer outra largura que você escolher */
}
td {
  width: 25%; /* Ajuste o tamanho conforme seu design. Para quatro células — 25% cada */
}
/* "Quero gerenciar isso, exatamente assim. Sem mais expansões não controladas da tabela!" - Isto deve ser o que seu HTML transmite */

Um layout fixo combinado com border-collapse: collapse garante compactação e previsibilidade na renderização da tabela.

Regulando o Conteúdo com a Propriedade white-space

Utilize os diversos valores da propriedade white-space de acordo com seus objetivos:

• normal: Quebra o texto nos limites de espaço em branco (este é o valor padrão).
• nowrap: Impede a quebra de texto.
• pre-wrap: Preserva espaços e quebras de linha, permitindo quebra quando necessário.
• pre-line: Apenas quebra nas quebras de linha, colapsando sequências de espaços.

Frameworks como Bootstrap ajudam a tornar as tabelas responsivas e resolvem automaticamente problemas de quebra.

Lidar com Casos Especiais

Se o texto se recusa a quebrar devido ao overflow ou outras propriedades CSS, use:

• max-width: Limita a extensão das células e facilita a quebra.
• overflow: hidden; text-overflow: ellipsis;: Corta o conteúdo do texto e adiciona reticências se for cortado.
• Verifique cuidadosamente a estrutura do seu documento HTML: Conflitos CSS não previstos podem afetar a quebra.

Visualização

Vamos visualizar uma estante de livros (📚), onde cada livro representa um <td>:

Estante normal: 📚📚📚📚📚
# Livros não estão cabendo? Se você não se importa com a ordem, o CSS organizará seu Tetris pessoal com texto.

Adicionando CSS:

td { 
  word-wrap: break-word; 
}

Estante flexível: 📚📚|📚|📚📚
# Cada 📚 se encaixa perfeitamente. Assim como seu texto após aplicar a quebra!

Essa analogia visual demonstra como a quebra funciona eficazmente, criando uma ordem visual legível e organizada.

Dicas Úteis para Melhorar a Exibição do Conteúdo

Usando Classes

Aplicar uma classe bem escolhida, por exemplo, wrappable, simplifica muito a gestão:

<td class="wrappable">Teletransporte, Scotty!</td>

Gerenciando Contêineres Externos

A largura do div pai pode influenciar significativamente a aparência da tabela:

div.container {
  width: 80%; /* Defina um tamanho apropriado */
}

Verificando Recursos Confiáveis

Consulte as especificações do W3C ou recursos como CSS-Tricks para explorar propriedades CSS como table-layout e white-space.

Integração para Confiabilidade

Combine o poder de múltiplas propriedades CSS juntas, como word-break, overflow-wrap e table-layout, para alcançar uma solução robusta.

Recursos Úteis

1. Guia Completo para o Elemento <table> | CSS-Tricks — Mergulhe no mundo das tabelas HTML com um guia completo e abrangente.
2. Tag HTML <td> — Aprenda praticando com exemplos enquanto usa a tag <td>.
3. SitePoint - Como Criar Tabelas Responsivas com CSS — Faça suas tabelas responsivas com este guia detalhado de CSS.
4. A Propriedade white-space | CSS-Tricks — Descubra como a propriedade white-space em CSS regula a quebra de texto.
5. Can I use... Tabelas de suporte para HTML5, CSS3, etc. — Verifique o suporte da propriedade word-break em CSS em diferentes navegadores.

Video

Navigation