web-dev-qa-db-fra.com

Comment afficher du texte multiligne dans une cellule de tableau

Je veux montrer un paragraphe de la base de données dans une cellule de tableau.

Le résultat est une grande ligne, ignorant comment il est organisé dans la base de données. ignorer 'entre' par exemple (nouvelles lignes)

Je veux montrer exactement en fonction de la façon dont 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.
htmlcsstablerow
101
Shady

Vous voulez utiliser le CSS white-space:pre appliqué au _<td>_ approprié. 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 balise <pre> autour de votre contenu. Par défaut, les navigateurs Web utilisent leur feuille de style agent utilisateur pour appliquer la même règle _white-space:pre_ à cet élément.

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

  • Peut laisser des espaces vierges.
  • 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.
147
Phrogz
style="white-space:pre-wrap; Word-wrap:break-Word"

Cela résoudrait le problème de la nouvelle ligne. pré-tag ajouterait plus de CSS que nécessaire.

46
Jajikanth pydimarla

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

<pre>hello ,
my name is x.</pre>
28
Joyce Babu

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 les onglets par exemple.

SOLUTION 2: Remplacez \n par <p></p> or <br/>

C'est une solution si vous souhaitez simplement ajouter des lignes de séparation, sans perdre d'autres propriétés de texte ou de formatage. 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 de texte.

23
Daniel Vila Boa

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

Si vous utilisez PHP, vous pouvez utiliser nl2br()

6
Rocket Hazmat

Salut j'avais besoin de faire la même chose! Ne demandez pas pourquoi mais je générais un code HTML à l'aide de python et j'avais besoin d'un moyen de parcourir en boucle les éléments d'une liste et de faire en sorte que chaque élément prenne une ligne distincte DANS UNE SEULE CELLULE d'une table.

J'ai trouvé que l'étiquette 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.

4
chumbaloo

J'utilise la balise 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>

3
Rene

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

td { white-space:pre-line }
2
Sumon Bappi

J'ai ajouté seulement <br> à l'intérieur de <td> et cela fonctionne bien, coupez la ligne!

1
Zvi