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.Odpowiedzi:
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.
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?
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.
<pre>Tag robi różne rzeczy poza tylko pozwalających znaków nowej linii, ale te ustawienia stylu rozwiązać tylko problem przedstawiony.
Umieść zawartość w <pre>znaczniku (wstępnie sformatowany tekst)
<pre>hello ,
my name is x.</pre>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.
W kodzie po stronie serwera zamień nowe wiersze ( \n) na <br/>.
Jeśli używasz PHP, możesz użyć nl2br()
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.
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>
poniższy kod działa dla mnie jak magia >>
td { white-space:pre-line }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>
white-spaceto szeroko obsługiwana właściwość CSS 2.1. Testowany na IE8, działa świetnie.