13.03.2025

Exibindo Texto Multilinha de um Banco de Dados em HTML

Resposta Rápida

Para garantir que o texto em células de tabela HTML apareça em várias linhas, você pode usar a tag <br> ou a propriedade CSS white-space: pre-line.

Aqui está um exemplo usando <br>:

<td>Primeira linha<br>Segunda linha<br>Terceira linha</td>

Aqui está um exemplo usando CSS:

<style>
.multiline { white-space: pre-line; }
</style>
<td class="multiline">Primeira linha
Segunda linha
Terceira linha</td>

A tag <br> é adequada para quebras de linha inseridas manualmente, enquanto o CSS é melhor para quebra de linha automática.

Gerenciando Espaços em Branco: A Arte do CSS

Gerenciar espaços em branco e quebras de linha é importante para formatar a exibição de texto em tabelas. A propriedade CSS white-space nos ajudará nisso.

Aqui estão os valores possíveis para white-space:

• normal — colapsa espaços em branco, e o texto se ajusta dentro do bloco;
• nowrap — colapsa espaços em branco e não permite quebras de linha;
• pre — preserva todos os espaços em branco e quebras de linha;
• pre-wrap — preserva espaços em branco, permite quebras de linha e ajusta tudo dentro do bloco;
• pre-line — colapsa espaços em branco, mas preserva quebras de linha.

Essas configurações ajudarão você a posicionar o texto multilinha exatamente como desejar.

Diferentes Métodos para Representar Texto Multilinha

Temos vários métodos para colocar texto em várias linhas em tabelas:

1. A tag <br>: Simples e confiável. Adiciona quebras onde necessário.
2. Propriedade CSS white-space: Oferece controle mais amplo sobre a formatação do texto.
3. A tag <pre>: Ideal para preservar a formatação original de código ou poesia.
4. Substituição de caracteres de nova linha: Ótimo para processamento de texto no lado do servidor. Converta caracteres \n em <br />.
5. Usando elementos de bloco: Oferece mais flexibilidade usando <div> ou <p> dentro de <td>.

Conhecer essas opções permite que você escolha a mais apropriada para suas circunstâncias.

Como Lidar com Linhas Longas e Overflow

Para gerenciar textos longos sem misturar conteúdos das células, considere as seguintes abordagens:

• Use pre-wrap juntamente com word-wrap: break-word para permitir que palavras quebrem em novas linhas.
• Use overflow com valores scroll ou auto se for necessário scrollbars.

td.multiline {
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* Textos longos não causarão mais problemas */

Como Evitar Impacto Global no CSS 🦠

Ao estilizar, evite fazer alterações globais:

td.multiline {
  white-space: pre-wrap;
  word-wrap: break-word;
}
/* Limite o impacto do seu CSS aos elementos necessários */

Visualização

Aqui está um exemplo de texto multilinha em uma tabela, semelhante a colocar livros em uma prateleira:

Texto da Célula (imagem com livros na prateleira 📚)
"As rosas são vermelhas, 🌹
Violetas são azuis,
O açúcar é doce,
E você também."

<td style="white-space: pre-line;">
  As rosas são vermelhas,
  Violetas são azuis,
  O açúcar é doce,
  E você também.
</td>

Design Responsivo: Melhores Práticas

É importante que o texto multilinha seja exibido corretamente tanto em dispositivos desktop quanto móveis:

@media screen and (max-width: 600px) {
  td.multiline {
    white-space: pre-wrap; /* Adequado para telas móveis! 📱 */
  }
}

Certifique-se de que seu texto se adapte a qualquer dispositivo.

Usando Semântica

HTML não transmite apenas aparência. Tags utilizadas corretamente (<p>, <div>, <span>) e atributos ARIA conferem significado ao conteúdo e melhoram a acessibilidade.

Trabalhando com Conteúdo de um Banco de Dados

Conteúdo de um banco de dados pode ser facilmente convertido em texto multilinha, como assistir vídeos de gatinhos fofos 🐱. Exemplo em PHP:

<?php
  echo '<td>' . nl2br(htmlentities($conteudo_banco)) . '</td>';
?>
/* O conteúdo do banco de dados é transformado em um belo texto multilinha! */

A função nl2br() será útil para substituir quebras de linha por <br>, e htmlentities() protegerá contra código malicioso.

Video

Navigation