Comment afficher du texte multiligne dans une cellule de tableau

119

Je souhaite afficher un paragraphe de la base de données dans une cellule de tableau.

Le résultat est une grande ligne 1, ignorant comment elle est organisée en base de données. ignorer 'entre' par exemple (nouvelles lignes)

Je veux le montrer exactement selon comment il est écrit dans la base de données.

Par exemple, si le paragraphe est enregistré comme ceci:

hello ,
my name is x.

Je veux qu'il soit montré exactement comme ça, au lieu de:

hello, myname is x.
html css tablerow Ombragé
la source

Réponses:

164

Vous souhaitez utiliser le CSS white-space:preappliqué au fichier approprié <td>. Pour faire cela à toutes les cellules du tableau, par exemple:

td { white-space:pre }

Sinon, si vous pouvez modifier votre balisage, vous pouvez utiliser une <pre>balise autour de votre contenu. Par défaut, les navigateurs Web utilisent leur feuille de style user-agent pour appliquer la même white-space:prerègle à cet élément.

L'élément PRE indique aux agents utilisateurs visuels que le texte inclus est "préformaté". Lors de la gestion de texte préformaté, les agents utilisateurs visuels:

  • Peut laisser un espace blanc intact.
  • Peut rendre le texte avec une police à pas fixe.
  • Peut désactiver le retour à la ligne automatique.
  • Ne doit pas désactiver le traitement bidirectionnel.
Phrogz
la source
Thumbs up, white-spaceest une propriété CSS 2.1 qui est largement prise en charge. Testé sur IE8, fonctionne très bien.
leesei
Je suis maintenant dans une situation où il white-space: pre;est ignoré lorsqu'il est appliqué dans une <td>balise. Utiliser <pre></pre>pour envelopper notre contenu fonctionne bien, mais en raison de l'utilisation de cette table (exportation vers Excel), de grands nombres de colonnes et de lignes gonflent la taille du fichier exporté et provoquent le blocage d'Excel lors de la lecture du fichier. (bizarre, je sais). Quelqu'un d'autre a-t-il vu cela ou a-t-il une idée de solution?
JoeBrockhaus
1
Cette solution est loin d'être parfaite. Il en résulte qu'Excel produit plusieurs lignes pour les cellules qui ont des sauts de ligne. La seule réponse correcte peut être trouvée ici: bennadel.com/blog/…
Elmue
55 
style="white-space:pre-wrap; word-wrap:break-word"

Cela résoudrait le problème de la nouvelle ligne. La balise pre ajouterait du CSS supplémentaire que nécessaire.

Jajikanth pydimarla
la source
1
C'est une belle solution ciblée. La <pre>balise fait toutes sortes de choses au-delà de la simple autorisation de caractères de nouvelle ligne, mais ces paramètres de style ne résolvent que le problème présenté.
déplace
J'ai eu un problème dans lequel mes données contiennent une nouvelle ligne. D'autres solutions comme le remplacement du texte par <br/> ou <div> ou <pre> étaient traitées comme du texte uniquement. Cette solution fonctionne parfaitement pour surmonter ce problème.
Anshuman Goel
Fantastique!! Cela fonctionne très bien pour moi. J'avais un JDataTable qui listait plusieurs textes et j'avais besoin de vous css pour envelopper le texte correctement! Day économiseur Merci beaucoup!
PatsonLeaner
1
Cela fonctionne pour moi en termes de préservation des sauts de ligne, mais ajoute un saut de ligne en haut de chaque cellule ... des solutions?
jtr13
30

Enveloppez le contenu dans une <pre>balise (texte pré-formaté)

<pre>hello ,
my name is x.</pre>
Joyce Babu
la source
3
Cependant, cela écrase la police avec monospace.
hardmooth
23

Deux suggestions pour résoudre ce problème:

SOLUTION 1: <div style="white-space:pre;">{database text}</div>ou<pre>{database text}</pre>

C'est une bonne solution si votre texte n'a pas de balises html ou de propriétés css. Permet également de maintenir des onglets par exemple.

SOLUTION 2: remplacer \npar<p></p> or <br/>

C'est une solution si vous souhaitez simplement ajouter des lignes de rupture, sans perdre d'autres propriétés de texte ou de mise en forme. Un exemple en php serait$text = str_replace("\n","<br />",$database_text);

Vous pouvez également utiliser <p></p>ou <div></div>, mais cela nécessite un peu plus d'analyse du texte.

Daniel Vila Boa
la source
7

Sur votre code côté serveur, remplacez les nouvelles lignes ( \n) par <br/>.

Si vous utilisez PHP, vous pouvez utiliser nl2br()

Fusée Hazmat
la source
6

Salut, j'avais besoin de faire la même chose! Ne demandez pas pourquoi, mais je générais un html en utilisant python et j'avais besoin d'un moyen de parcourir les éléments d'une liste et de faire en sorte que chaque élément prenne une ligne de sa propre dans UNE SEULE CELLULE d'une table.

J'ai trouvé que la balise br fonctionnait bien pour moi. Par exemple:

<!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>

Cela produira la sortie que je voulais.

chumbaloo
la source
5

J'utilise la balise de code html après chaque ligne (voir ci-dessous) et cela fonctionne pour moi.

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

René
la source
2
ce devrait être un commentaire et non une réponse.
Deep Sharma
<br> brise la sémantique de la table. Lors de l'affichage du tableau à l'aide d'un navigateur basé sur du texte, les nouvelles lignes sont affichées comme des lignes de tableau.
JAT86
3

le code ci-dessous fonctionne comme par magie pour moi >>

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

J'ai ajouté seulement <br>à l'intérieur du <td>et ça marche bien, casse la ligne!

Zvi
la source
0

Si vous avez une variable de chaîne avec \ndedans, que vous voulez mettre à l'intérieur td, vous pouvez essayer

<td>
    {value
        .split('\n')
        .map((s, index) => (
            <React.Fragment key={index}>
                {s}
                <br />
            </React.Fragment>
        ))}
</td>
Eugène Ihnatsyeu
la source