Jak wyświetlić tekst wielowierszowy w komórce tabeli

119

Chcę pokazać akapit z bazy danych do komórki tabeli.

W rezultacie otrzymujemy 1 dużą linię, ignorując jej organizację w bazie danych. na przykład ignorowanie `` wejść '' (nowe wiersze)

Chcę to pokazać dokładnie zgodnie z tym, jak jest zapisane w bazie danych.

Na przykład, jeśli akapit jest zapisany w ten sposób:

hello ,
my name is x.

Chcę, żeby było to pokazywane dokładnie w ten sposób, zamiast:

hello, myname is x.
html css tablerow Zacieniony
źródło

Odpowiedzi:

164

Chcesz użyć CSS white-space:prezastosowanego do odpowiedniego pliku <td>. Aby to zrobić dla wszystkich komórek tabeli, na przykład:

td { white-space:pre }

Alternatywnie, jeśli możesz zmienić znaczniki, możesz użyć <pre>tagu wokół treści. Domyślnie przeglądarki internetowe używają arkusza stylów klienta użytkownika, aby zastosować tę samą white-space:preregułę do tego elementu.

Element PRE informuje wizualnych agentów użytkownika, że ​​załączony tekst jest „wstępnie sformatowany”. Podczas obsługi wstępnie sformatowanego tekstu wizualne programy użytkownika:

  • Może pozostawić spację nienaruszoną
  • Może renderować tekst czcionką o stałej szerokości.
  • Może wyłączyć automatyczne zawijanie wyrazów.
  • Nie wolno wyłączać przetwarzania dwukierunkowego.
Phrogz
źródło
Kciuki w górę white-spaceto szeroko obsługiwana właściwość CSS 2.1. Testowany na IE8, działa świetnie.
leesei
Jestem teraz w sytuacji, w której white-space: pre;jest ignorowany po zastosowaniu w <td>tagu. Użycie <pre></pre>do zawijania naszej zawartości działa dobrze, ale ze względu na użycie tej tabeli (eksportowanie do programu Excel) duża liczba kolumn i wierszy powiększa rozmiar eksportowanego pliku i powoduje awarię programu Excel podczas odczytywania pliku. (dziwne, wiem). Czy ktoś jeszcze to widział lub ma pomysł na rozwiązanie?
JoeBrockhaus
1
To rozwiązanie jest dalekie od doskonałości. Wynika z tego, że Excel tworzy wiele linii dla komórek, które mają podziały wierszy. Jedyną poprawną odpowiedź można znaleźć tutaj: bennadel.com/blog/…
Elmue
55 
style="white-space:pre-wrap; word-wrap:break-word"

To rozwiązałoby problem nowej linii. tag pre dodałby więcej CSS niż jest to wymagane.

Jajikanth pydimarla
źródło
1
To miłe, ukierunkowane rozwiązanie. <pre>Tag robi różne rzeczy poza tylko pozwalających znaków nowej linii, ale te ustawienia stylu rozwiązać tylko problem przedstawiony.
ruchy
Miałem problem, w którym moje dane zawierają nową linię. Inne rozwiązanie, takie jak zamiana tekstu na <br/> lub <div> lub <pre>, było traktowane tylko jako tekst. To rozwiązanie doskonale radzi sobie z tym problemem.
Anshuman Goel
Fantastyczny!! To działa bardzo dobrze dla mnie. Miałem JDataTable, który zawierał wiele różnych tekstów i potrzebowałem twojego css, aby poprawnie zawinąć tekst! Wygaszacz dnia Wielkie dzięki!
PatsonLeaner
1
Działa to w przypadku mnie, jeśli chodzi o zachowanie podziałów linii, ale dodaje podział wiersza na początku każdej komórki ... jakieś rozwiązania?
jtr13
30

Umieść zawartość w <pre>znaczniku (wstępnie sformatowany tekst)

<pre>hello ,
my name is x.</pre>
Joyce Babu
źródło
3
Powoduje to jednak zastąpienie czcionki czcionką o stałej szerokości.
hardmooth
23

Dwie sugestie dotyczące rozwiązania tego problemu:

ROZWIĄZANIE 1: <div style="white-space:pre;">{database text}</div>lub<pre>{database text}</pre>

Jest to dobre rozwiązanie, jeśli Twój tekst nie ma tagów HTML lub właściwości CSS. Pozwala także np. Na utrzymywanie zakładek.

Rozwiązanie 2: Wymień \nsię<p></p> or <br/>

Jest to rozwiązanie, jeśli chcesz po prostu dodać linie przerwania, bez utraty innych właściwości tekstu lub formatowania. Przykładem w php byłoby$text = str_replace("\n","<br />",$database_text);

Możesz także użyć <p></p>lub <div></div>, ale wymaga to nieco więcej analizy tekstu.

Daniel Vila Boa
źródło
7

W kodzie po stronie serwera zamień nowe wiersze ( \n) na <br/>.

Jeśli używasz PHP, możesz użyć nl2br()

Rocket Hazmat
źródło
6

Cześć, musiałem zrobić to samo! Nie pytaj dlaczego, ale generowałem kod HTML za pomocą Pythona i potrzebowałem sposobu na zapętlenie elementów na liście i umieszczenie każdego elementu we własnym wierszu W RAMACH POJEDYNCZEJ KOMÓRKI tabeli.

Okazało się, że tag br działa dobrze dla mnie. Na przykład:

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

Spowoduje to uzyskanie oczekiwanego wyniku.

chumbaloo
źródło
5

Używam tagu kodu HTML po każdym wierszu (patrz poniżej) i działa dla mnie.

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

Rene
źródło
2
powinien to być komentarz, a nie odpowiedź.
Deep Sharma
<br> łamie semantykę tabeli. Podczas przeglądania tabeli za pomocą przeglądarki tekstowej nowe wiersze są wyświetlane jako wiersze tabeli.
JAT86
3

poniższy kod działa dla mnie jak magia >>

td { white-space:pre-line }
Sumon Bappi
źródło
1

Dodałem tylko <br>wewnątrz <td>i działa dobrze, przełamać linię!

Zvi
źródło
0

Jeśli masz w sobie zmienną typu string \n, którą chcesz umieścić w środku td, możesz spróbować

<td>
    {value
        .split('\n')
        .map((s, index) => (
            <React.Fragment key={index}>
                {s}
                <br />
            </React.Fragment>
        ))}
</td>
Eugene Ihnatsyeu
źródło