So zeigen Sie mehrzeiligen Text in einer Tabellenzelle an

119

Ich möchte einen Absatz aus der Datenbank in eine Tabellenzelle zeigen.

Das Ergebnis ist eine große 1-Zeile, die ignoriert, wie sie in der Datenbank organisiert ist. Ignorieren von "Eingaben" zum Beispiel (neue Zeilen)

Ich möchte es genau so zeigen, wie es in der Datenbank geschrieben ist.

Zum Beispiel, wenn ein Absatz wie folgt gespeichert wird:

hello ,
my name is x.

Ich möchte, dass es genau so gezeigt wird, anstatt:

hello, myname is x.

html css tablerow Schattig
quelle

163

Sie möchten das white-space:preauf das entsprechende CSS angewendete CSS verwenden <td>. So tun Sie dies für alle Tabellenzellen:

td { white-space:pre }

Wenn Sie Ihr Markup ändern können, können Sie alternativ ein <pre>Tag um Ihren Inhalt verwenden. Standardmäßig verwenden Webbrowser ihr User-Agent-Stylesheet, um dieselbe white-space:preRegel auf dieses Element anzuwenden .

Das PRE-Element teilt visuellen Benutzeragenten mit, dass der beigefügte Text "vorformatiert" ist. Beim Umgang mit vorformatiertem Text können visuelle Benutzeragenten:

Kann Leerzeichen intakt lassen.

Kann Text mit einer Schriftart mit fester Tonhöhe rendern.

Kann den automatischen Zeilenumbruch deaktivieren.

Die bidirektionale Verarbeitung darf nicht deaktiviert werden.

Phrogz
quelle

Thumbs up white-spaceist eine CSS 2.1-Eigenschaft, die weitgehend unterstützt wird. Getestet auf IE8, funktioniert super.

Leesei

Ich bin jetzt in einer Situation, in white-space: pre;der ignoriert wird, wenn es in einem <td>Tag angewendet wird . Das <pre></pre>Umschließen unserer Inhalte funktioniert einwandfrei, aber aufgrund der Verwendung dieser Tabelle (Exportieren nach Excel) vergrößern sich viele Spalten und Zeilen in der Größe der exportierten Datei und führen beim Lesen der Datei zum Absturz von Excel. (seltsam, ich weiß). Hat jemand dies gesehen oder eine Idee für eine Lösung?

JoeBrockhaus

1

Diese Lösung ist alles andere als perfekt. Dies führt dazu, dass Excel mehrere Zeilen für die Zellen mit Zeilenumbrüchen erstellt. Die einzig richtige Antwort finden Sie hier: bennadel.com/blog/…

Elmue

55

style="white-space:pre-wrap; word-wrap:break-word"

Dies würde das Problem der neuen Leitung lösen. Pre-Tag würde zusätzliches CSS als erforderlich hinzufügen.

Jajikanth pydimarla
quelle

1

Dies ist eine schöne, zielgerichtete Lösung. Das <pre>Tag erledigt alle möglichen Dinge, die über das Zulassen von Zeilenumbrüchen hinausgehen. Diese Stileinstellungen lösen jedoch nur das dargestellte Problem.

Moveson

Ich hatte ein Problem, bei dem meine Daten eine neue Zeile enthalten. Andere Lösungen wie das Ersetzen von Text durch <br/> oder <div> oder <pre> wurden nur als Text behandelt. Diese Lösung funktioniert perfekt, um dieses Problem zu überwinden.

Anshuman Goel

Fantastisch!! Das funktioniert sehr gut für mich. Ich hatte eine JDataTable, in der mehrere Texte aufgelistet waren, und ich brauchte CSS, um den Text richtig zu verpacken! Tagessparen Vielen Dank!

PatsonLeaner

1

Dies funktioniert für mich im Hinblick auf die Beibehaltung von Zeilenumbrüchen, fügt jedoch einen Zeilenumbruch oben in jede Zelle ein ... irgendwelche Lösungen?

13.

30

Wickeln Sie den Inhalt in ein <pre>Tag (vorformatierter Text)

<pre>hello ,
my name is x.</pre>

Joyce Babu
quelle

3

Dies überschreibt jedoch die Schriftart mit Monospace.

Hardmooth

23

Zwei Vorschläge zur Lösung dieses Problems:

LÖSUNG 1: <div style="white-space:pre;">{database text}</div>oder<pre>{database text}</pre>

Dies ist eine gute Lösung, wenn Ihr Text keine HTML-Tags oder CSS-Eigenschaften hat. Ermöglicht auch die Pflege von Registerkarten.

LÖSUNG 2: Ersetzen \ndurch<p></p> or <br/>

Dies ist eine Lösung, wenn Sie nur Zeilenumbrüche hinzufügen möchten, ohne andere Texteigenschaften oder Formatierungen zu verlieren. Ein Beispiel in PHP wäre$text = str_replace("\n","<br />",$database_text);

Sie können auch <p></p>oder verwenden <div></div>, dies erfordert jedoch etwas mehr Textanalyse.

Daniel Vila Boa
quelle

7

Ersetzen Sie in Ihrem serverseitigen Code die neuen Zeilen ( \n) durch<br/> .

Wenn Sie PHP verwenden, können Sie verwenden nl2br()

Rakete Hazmat
quelle

6

Hallo, ich musste das Gleiche tun! Fragen Sie nicht warum, aber ich habe ein HTML mit Python generiert und brauchte eine Möglichkeit, um Elemente in einer Liste zu durchlaufen und jedes Element in einer eigenen Zeile INNERHALB EINER EINZELNEN ZELLE einer Tabelle zu übernehmen.

Ich fand, dass das br-Tag für mich gut funktionierte. Beispielsweise:

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

Dies erzeugt die Ausgabe, die ich wollte.

Chumbaloo
quelle

5

Ich benutze das HTML-Code-Tag nach jeder Zeile (siehe unten) und es funktioniert für mich.

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

Rene
quelle

2

Es sollte ein Kommentar sein, keine Antwort.

Deep Sharma

<br> bricht die Tabellensemantik. Wenn Sie die Tabelle mit einem textbasierten Browser anzeigen, werden neue Zeilen als Tabellenzeilen angezeigt.

JAT86

3

Der folgende Code funktioniert für mich wie Magie >>

td { white-space:pre-line }

Sumon Bappi
quelle

1

Ich habe nur <br>innerhalb der hinzugefügt <td>und es funktioniert gut, brechen Sie die Linie!

Zvi
quelle

0

Wenn Sie eine Zeichenfolgenvariable enthalten \n, die Sie einfügen möchten td, können Sie es versuchen

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

Eugene Ihnatsyeu
quelle

So zeigen Sie mehrzeiligen Text in einer Tabellenzelle an

Antworten: