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.Réponses:
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.
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?
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.
<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é.
Enveloppez le contenu dans une <pre>balise (texte pré-formaté)
<pre>hello ,
my name is x.</pre>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.
Sur votre code côté serveur, remplacez les nouvelles lignes ( \n) par <br/>.
Si vous utilisez PHP, vous pouvez utiliser nl2br()
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.
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>
le code ci-dessous fonctionne comme par magie pour moi >>
td { white-space:pre-line }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>
white-spaceest une propriété CSS 2.1 qui est largement prise en charge. Testé sur IE8, fonctionne très bien.