Cara menampilkan teks multiline dalam sel tabel

119

Saya ingin menampilkan paragraf dari database ke dalam sel tabel.

Hasilnya adalah 1 baris besar, mengabaikan bagaimana pengaturannya dalam database. mengabaikan 'masuk' misalnya (baris baru)

Saya ingin menunjukkannya persis seperti yang tertulis di database.

Misalnya jika paragraf disimpan seperti ini:

hello ,
my name is x.

Saya ingin itu ditampilkan persis seperti itu, alih-alih:

hello, myname is x.
html css tablerow Teduh
sumber

Jawaban:

164

Anda ingin menggunakan CSS yang white-space:prediterapkan sesuai <td>. Untuk melakukan ini ke semua sel tabel, misalnya:

td { white-space:pre }

Alternatifnya, jika Anda dapat mengubah markup Anda, Anda dapat menggunakan <pre>tag di sekitar konten Anda. Secara default, browser web menggunakan lembar gaya agen pengguna mereka untuk menerapkan white-space:preaturan yang sama ke elemen ini.

Elemen PRE memberi tahu agen pengguna visual bahwa teks yang dilampirkan telah "diformat sebelumnya". Saat menangani teks yang diformat sebelumnya, agen pengguna visual:

  • Dapat membiarkan ruang putih tetap utuh.
  • Dapat merender teks dengan font nada tetap.
  • Dapat menonaktifkan bungkus kata otomatis.
  • Tidak boleh menonaktifkan pemrosesan dua arah.
Phrogz
sumber
Jempol, white-spaceadalah properti CSS 2.1 yang didukung secara luas. Diuji di IE8, berfungsi dengan baik.
leesei
Saya dalam situasi sekarang di mana white-space: pre;diabaikan saat diterapkan di <td>tag. Menggunakan <pre></pre>untuk membungkus konten kami berfungsi dengan baik, tetapi karena penggunaan tabel ini (mengekspor ke excel), #s besar kolom dan baris membengkak ukuran file yang diekspor dan menyebabkan excel macet saat membaca file. (aneh, saya tahu). Apakah ada orang lain yang melihat ini atau punya ide untuk solusi?
JoeBrockhaus
1
Solusi ini masih jauh dari sempurna. Hasilnya Excel menghasilkan beberapa baris untuk sel yang memiliki penggalan baris. Satu-satunya jawaban yang benar dapat ditemukan di sini: bennadel.com/blog/…
Elmue
55 
style="white-space:pre-wrap; word-wrap:break-word"

Ini akan menyelesaikan masalah jalur baru. tag awal akan menambahkan CSS tambahan dari yang dibutuhkan.

Jajikanth pydimarla
sumber
1
Ini adalah solusi yang bagus dan tepat sasaran. The <pre>tag tidak segala macam hal di luar hanya memungkinkan karakter baris baru, tapi pengaturan gaya ini memecahkan hanya masalah disajikan.
bergerak pada
Saya mengalami masalah saat data saya berisi baris baru. Solusi lain seperti mengganti teks dengan <br/> atau <div> atau <pre> diperlakukan sebagai teks saja. Solusi ini bekerja dengan sempurna untuk mengatasi masalah itu.
Anshuman Goel
Fantastis!! Ini bekerja dengan sangat baik untuk saya. Saya memiliki JDataTable yang mencantumkan teks mutliple dan saya membutuhkan Anda css untuk membungkus teks dengan benar! Penghemat hari Terima kasih banyak!
PatsonLeaner
1
Ini berfungsi untuk saya dalam hal mempertahankan jeda baris, tetapi menambahkan jeda baris ke atas setiap sel ... ada solusi?
jtr13
30

Bungkus konten dalam <pre>tag (teks yang telah diformat sebelumnya)

<pre>hello ,
my name is x.</pre>
Joyce Babu
sumber
3
Namun, ini menimpa font dengan monospace.
hardmooth
23

Dua saran untuk memecahkan masalah ini:

SOLUSI 1: <div style="white-space:pre;">{database text}</div>atau<pre>{database text}</pre>

Ini adalah solusi yang bagus jika teks Anda tidak memiliki tag html atau properti css. Juga memungkinkan untuk memelihara tab misalnya.

SOLUSI 2: Ganti \ndengan<p></p> or <br/>

Ini adalah solusi jika Anda hanya ingin menambahkan garis putus-putus, tanpa kehilangan properti teks atau pemformatan lainnya. Contoh di php adalah$text = str_replace("\n","<br />",$database_text);

Anda juga dapat menggunakan <p></p>atau <div></div>, tetapi ini membutuhkan lebih banyak penguraian teks.

Daniel Vila Boa
sumber
7

Pada kode sisi server Anda, ganti baris baru ( \n) dengan <br/>.

Jika Anda menggunakan PHP, Anda dapat menggunakan nl2br()

Roket Hazmat
sumber
6

Hai, saya perlu melakukan hal yang sama! Jangan tanya mengapa tapi saya menghasilkan html menggunakan python dan membutuhkan cara untuk mengulang item dalam daftar dan memiliki setiap item mengambil barisnya sendiri DI DALAM SEL TUNGGAL tabel.

Saya menemukan bahwa br tag bekerja dengan baik untuk saya. Sebagai contoh:

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

Ini akan menghasilkan keluaran yang saya inginkan.

chumbaloo
sumber
5

Saya menggunakan tag kode html setelah setiap baris (lihat di bawah) dan berfungsi untuk saya.

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

Rene
sumber
2
itu harus menjadi komentar bukan jawaban.
Deep Sharma
<br> memecah semantik tabel. Saat melihat tabel menggunakan browser berbasis teks, baris baru ditampilkan seperti baris tabel.
JAT86
3

kode di bawah ini bekerja seperti sihir bagi saya >>

td { white-space:pre-line }
Sumon Bappi
sumber
1

Saya menambahkan hanya <br>di dalam <td>dan itu berfungsi dengan baik, hancurkan garis!

Zvi
sumber
0

Jika Anda memiliki variabel string \ndi dalamnya, yang ingin Anda masukkan ke dalamnya td, Anda dapat mencobanya

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