Voglio mostrare un paragrafo dal database in una cella di tabella.
Il risultato è una grande riga 1, ignorando come è organizzata nel database. ignorando ad esempio "entra" (nuove righe)
Voglio mostrarlo esattamente in base a come è scritto nel database.
Ad esempio, se il paragrafo viene salvato in questo modo:
hello ,
my name is x.Voglio che venga mostrato esattamente così, invece di:
hello, myname is x.Risposte:
Si desidera utilizzare il CSS white-space:preapplicato al file <td>. Per eseguire questa operazione su tutte le celle della tabella, ad esempio:
td { white-space:pre }In alternativa, se puoi modificare il markup, puoi utilizzare un <pre>tag attorno al tuo contenuto. Per impostazione predefinita, i browser Web utilizzano il loro foglio di stile agente utente per applicare la stessa white-space:preregola a questo elemento.
L'elemento PRE dice ai programmi utente visivi che il testo incluso è "preformattato". Quando si maneggia testo preformattato, i programmi utente visivi:
- Può lasciare intatti gli spazi bianchi.
- Può rendere il testo con un carattere a passo fisso.
- Può disabilitare il ritorno a capo automatico.
- Non deve disabilitare l'elaborazione bidirezionale.
white-space: pre;viene ignorato quando applicato in un <td>tag. L'utilizzo <pre></pre>di avvolgere il nostro contenuto funziona bene, ma a causa dell'uso di questa tabella (esportazione in excel), grandi numeri di colonne e righe aumentano le dimensioni del file esportato e causano l'arresto anomalo di Excel durante la lettura del file. (strano, lo so). Qualcun altro l'ha visto o ha un'idea per una soluzione?
style="white-space:pre-wrap; word-wrap:break-word"Ciò risolverebbe il problema della nuova linea. pre tag aggiungerebbe CSS aggiuntivo rispetto a quanto richiesto.
<pre>tag fa tutti i tipi di cose oltre a consentire solo i caratteri di nuova riga, ma queste impostazioni di stile risolvono solo il problema presentato.
Avvolgi il contenuto in un <pre>tag (testo preformattato)
<pre>hello ,
my name is x.</pre>Due suggerimenti per risolvere questo problema:
SOLUZIONE 1: <div style="white-space:pre;">{database text}</div> o<pre>{database text}</pre>
Questa è una buona soluzione se il tuo testo non ha tag html o proprietà css. Permette anche di mantenere le schede per esempio.
SOLUZIONE 2: sostituire \n con<p></p> or <br/>
Questa è una soluzione se desideri semplicemente aggiungere linee di interruzione, senza perdere altre proprietà del testo o formattazione. Un esempio in php potrebbe essere$text = str_replace("\n","<br />",$database_text);
Puoi anche usare <p></p>o <div></div>, ma questo richiede un po 'più di analisi del testo.
Sul tuo codice lato server, sostituisci le nuove righe ( \n) con<br/> .
Se stai usando PHP, puoi usare nl2br()
Ciao, dovevo fare la stessa cosa! Non chiedermi perché, ma stavo generando un html usando Python e avevo bisogno di un modo per scorrere gli elementi in un elenco e fare in modo che ogni elemento prendesse una riga all'interno di una singola cella di una tabella.
Ho scoperto che il tag br ha funzionato bene per me. Per esempio:
<!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>Questo produrrà l'output che volevo.
Uso il tag del codice html dopo ogni riga (vedi sotto) e funziona per me.
George Benson </br>
123 Main Street </br>
New York, Ny 12344 </br>
il codice seguente funziona come per magia per me >>
td { white-space:pre-line }Se hai una variabile stringa con \ndentro, che vuoi inserire td, puoi provare
<td>
{value
.split('\n')
.map((s, index) => (
<React.Fragment key={index}>
{s}
<br />
</React.Fragment>
))}
</td>
white-spaceè una proprietà CSS 2.1 ampiamente supportata. Testato su IE8, funziona alla grande.