Como mostrar texto multilinha em uma célula de tabela

119

Quero mostrar um parágrafo do banco de dados em uma célula da tabela.

O resultado é uma grande linha 1, ignorando como está organizada no banco de dados. ignorando 'entra', por exemplo (novas linhas)

Quero mostrar exatamente de acordo com a forma como está escrito no banco de dados.

Por exemplo, se o parágrafo for salvo assim:

hello ,
my name is x.

Quero que seja mostrado exatamente assim, em vez de:

hello, myname is x.
html css tablerow Shady
fonte

Respostas:

164

Você deseja usar o CSS white-space:preaplicado ao apropriado <td>. Para fazer isso com todas as células da tabela, por exemplo:

td { white-space:pre }

Como alternativa, se você pode alterar sua marcação, você pode usar uma <pre>tag em torno de seu conteúdo. Por padrão, os navegadores da web usam sua folha de estilo do agente do usuário para aplicar a mesma white-space:preregra a este elemento.

O elemento PRE informa aos agentes visuais do usuário que o texto incluído é "pré-formatado". Ao lidar com texto pré-formatado, os agentes visuais do usuário:

  • Pode deixar o espaço em branco intacto.
  • Pode processar texto com uma fonte de densidade fixa.
  • Pode desativar a quebra automática de palavras.
  • Não deve desativar o processamento bidirecional.
Phrogz
fonte
Gostei, white-spaceé uma propriedade CSS 2.1 amplamente suportada. Testado no IE8, funciona muito bem.
leesei
Estou em uma situação agora em que white-space: pre;está sendo ignorado quando aplicado em uma <td>tag. Usar <pre></pre>para embrulhar nosso conteúdo funciona bem, mas devido ao uso desta tabela (exportando para o Excel), grandes números de colunas e linhas aumentam o tamanho do arquivo exportado e fazem o Excel travar ao ler o arquivo. (estranho, eu sei). Alguém mais viu isso ou tem uma ideia para uma solução?
JoeBrockhaus
1
Esta solução está longe de ser perfeita. O resultado é que o Excel produz várias linhas para as células que têm quebras de linha. A única resposta correta pode ser encontrada aqui: bennadel.com/blog/…
Elmue
55 
style="white-space:pre-wrap; word-wrap:break-word"

Isso resolveria o problema da nova linha. pre tag adicionaria CSS adicional do que o necessário.

Jajikanth Pydimarla
fonte
1
Esta é uma boa solução direcionada. A <pre>tag faz todos os tipos de coisas além de apenas permitir caracteres de nova linha, mas essas configurações de estilo resolvem apenas o problema apresentado.
moveson
Tive um problema em que meus dados continham nova linha. Outra solução, como substituir texto por <br/> ou <div> ou <pre>, estavam sendo tratadas apenas como texto. Essa solução funciona perfeitamente superando esse problema.
Anshuman Goel
Fantástico!! Isso funciona muito bem para mim. Eu tinha um JDataTable que listava vários textos e precisava de seu css para quebrar o texto corretamente! Proteção de dia Muito obrigado!
PatsonLeaner de
1
Isso funciona para mim em termos de preservação de quebras de linha, mas adiciona uma quebra de linha no topo de cada célula ... alguma solução?
jtr13
30

Envolva o conteúdo em uma <pre>tag (texto pré-formatado)

<pre>hello ,
my name is x.</pre>
Joyce Babu
fonte
3
No entanto, isso substitui a fonte por monoespaço.
hardmooth
23

Duas sugestões para resolver este problema:

SOLUÇÃO 1: <div style="white-space:pre;">{database text}</div>ou<pre>{database text}</pre>

Esta é uma boa solução se o seu texto não tiver tags html ou propriedades css. Também permite manter guias, por exemplo.

SOLUÇÃO 2: Substitua \npor<p></p> or <br/>

Esta é uma solução se você deseja apenas adicionar linhas de quebra, sem perder outras propriedades de texto ou formatação. Um exemplo em php seria$text = str_replace("\n","<br />",$database_text);

Você também pode usar <p></p>ou <div></div>, mas isso requer um pouco mais de análise de texto.

Daniel Vila Boa
fonte
7

No código do lado do servidor, substitua as novas linhas ( \n) por <br/>.

Se você estiver usando PHP, você pode usar nl2br()

Foguete Hazmat
fonte
6

Oi eu precisava fazer a mesma coisa! Não pergunte por que, mas eu estava gerando um html usando python e precisava de uma maneira de percorrer os itens de uma lista e fazer com que cada item assumisse uma linha própria DENTRO DE UMA ÚNICA CÉLULA de uma tabela.

Descobri que a tag br funcionou bem para mim. Por exemplo:

<!DOCTYPE html>
<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
  <TABLE>
            <TR>
                <TD>
                    item 1 <BR>
                    item 2 <BR>
                    item 3 <BR>
                    item 4 <BR>
                </TD>
            </TR>
        </TABLE>
  </BODY>

Isso produzirá a saída que eu queria.

chumbaloo
fonte
5

Eu uso a tag de código html após cada linha (veja abaixo) e funciona para mim.

George Benson </br> 123 Main Street </br> New York, Ny 12344 </br>

Rene
fonte
2
deve ser um comentário, não uma resposta.
Deep Sharma
<br> quebra a semântica da tabela. Ao visualizar a tabela usando um navegador baseado em texto, novas linhas são mostradas como se fossem linhas de tabela.
JAT86
3

o código abaixo funciona como mágica para mim >>

td { white-space:pre-line }
Sumon Bappi
fonte
1

Adicionei apenas <br>dentro do <td>e funciona bem, quebre a linha!

Zvi
fonte
0

Se você tem uma variável de string \ndentro dela, que você quer colocar dentro td, você pode tentar

<td>
    {value
        .split('\n')
        .map((s, index) => (
            <React.Fragment key={index}>
                {s}
                <br />
            </React.Fragment>
        ))}
</td>
Eugene Ihnatsyeu
fonte