Bungkus teks dalam tag <td>


140

Saya ingin membungkus beberapa teks yang ditambahkan ke <td>elemen. Saya telah mencoba dengan style="word-wrap: break-word;" width="15%". Tapi itu tidak membungkus teks. Apakah wajib memberikan lebar 100%? Saya memiliki kontrol lain untuk ditampilkan sehingga hanya tersedia lebar 15%.


1
HTML apa yang Anda gunakan? apakah ini <td> beberapa teks ... </td> atau apakah TD Anda mengandung <p> atau <span>? Juga ketika Anda mengatakan itu tidak membungkus saya kira Anda melihat TD meluas dalam lebar ketika teks lebih panjang dari "15%" dari lebar tabel?
scunliffe

HTML saya memiliki <td> teks dinamis .. </td> dan apa yang Anda anggap tentang ekspansi TD benar sekali.

Jawaban:


224

Untuk membungkus teks TD

Gaya meja set pertama

table{
    table-layout: fixed;
}

lalu atur TD Style

td{
    word-wrap:break-word
}

5
Saya kira itu tidak diterima karena tidak berfungsi di chrome ... :-( Ada solusi untuk webkit?
MarcoS

4
Bekerja dengan sempurna untuk saya di Chrome.
Alejandro Riedel

17
Menarik ... Di Chrome, saya harus menggunakan white-space: normalgaya td agar pembungkusnya berfungsi (bukan word-wrap:break-word)
Jim

3
Saya dapat mengonfirmasi bahwa saya memiliki pengalaman yang sama dengan jawaban Jim. Untuk beberapa alasan Chrome tidak merespons tanpawhite-space:normal;
petrosmm

1
Gunakan white-space: pre-wrapjika Anda perlu mempertahankan ruang kosong.
eicksl

47

Tabel HTML mendukung gaya css "table-layout: fixed" yang mencegah agen pengguna menyesuaikan lebar kolom dengan kontennya. Anda mungkin ingin menggunakannya.


7
Saya telah mencoba solusi ini, tetapi tampaknya tidak berfungsi di Chrome. Saya memiliki tabel yang diisi secara dinamis dengan hyperlink yang lebih dari dua kali lebar sel. 'table-layout: fixed' memecahkan masalah dengan peregangan tabel, tetapi tidak membungkus teks; alih-alih itu terus meregang ke kanan halaman. Apakah saya melewatkan sesuatu?
VOIDHand

32

Saya yakin Anda telah menemukan hasil tangkapan 22 tabel. Tabel sangat bagus untuk membungkus konten dalam struktur tabel dan mereka melakukan pekerjaan yang sangat baik dalam "merentangkan" untuk memenuhi kebutuhan konten yang dikandungnya.

Secara default, sel tabel akan meregang agar sesuai dengan konten ... sehingga teks Anda membuatnya lebih lebar.

Ada beberapa solusi.

1.) Anda dapat mencoba mengatur lebar-maksimal pada TD.

<td style="max-width:150px;">

2.) Anda dapat mencoba memasukkan teks Anda ke dalam elemen pembungkus (misalnya rentang) dan menetapkan batasan di atasnya.

<td><span style="max-width:150px;">Hello World...</span></td>

Ketahuilah bahwa versi IE yang lebih lama tidak mendukung min / max-width.

Karena IE tidak mendukung lebar maksimal secara asli, Anda harus menambahkan peretasan jika Anda ingin memaksanya. Ada beberapa cara untuk menambahkan peretasan, ini hanya satu.

Saat memuat halaman, hanya untuk IE6, dapatkan lebar tabel yang dirender (dalam piksel) lalu dapatkan 15% dari itu dan terapkan sebagai lebar ke TD pertama di kolom itu (atau TH jika Anda memiliki header) lagi, dalam piksel .


Saya memiliki kedua cara tersebut. Tapi tidak bisa membungkus teks. Saya menggunakan IE6.0

1
ah, IE6. Ini menambah kompleksitas. Saya akan merevisi jawaban saya dengan hack IE6.
scunliffe

11

table-layout:fixedakan menyelesaikan masalah sel yang berkembang, tetapi akan membuat yang baru. IE secara default akan menyembunyikan overflow tetapi Mozilla akan membuatnya di luar kotak.

Solusi lain adalah dengan menggunakan: overflow:hidden;width:?px

<table style="table-layout:fixed; width:100px">
 <tr>
   <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
   <td>
     test
   </td>
 </tr>
</table>


10

menggunakan word-breakdapat digunakan tanpa styling tableuntuktable-layout: fixed

table {
  width: 140px;
  border: 1px solid #bbb
}

.tdbreak {
  word-break: break-all
}
<p>without word-break</p>
<table>
  <tr>
    <td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

<p>with word-break</p>
<table>
  <tr>
    <td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>


9

Ini bekerja untuk saya dengan beberapa kerangka css (desain material lite [MDL]).

table {
  table-layout: fixed;
  white-space: normal!important;
}

td {
  word-wrap: break-word;
}

3

Ini bekerja dengan sangat baik:

<td><div style = "width:80px; word-wrap: break-word"> your text </div></td> 

Anda dapat menggunakan lebar yang sama untuk semua milik Anda <div, atau menyesuaikan lebar di setiap kasus untuk memecah teks Anda dimanapun Anda suka.

Dengan cara ini Anda tidak perlu bermain-main dengan lebar tabel tetap, atau css yang rumit.


1
Anda mungkin bermaksud menggunakan CSS, tetapi gaya sebaris umumnya dihindari dalam HTML modern, terutama jika Anda mengulangi gaya yang sama berulang kali untuk setiap div yang disalin.
TankorSmash

3

Saya punya beberapa tddengan:

white-space: pre;

Ini menyelesaikannya untuk saya:

white-space: pre-wrap;


1

Mungkin saja ini berhasil, tetapi mungkin terbukti sedikit mengganggu di beberapa titik di masa depan (jika tidak segera).

<style> 
tbody td span {display: inline-block;
               width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */
               overflow: hidden; 
               white-space: nowrap; }

</style>

...

<table>

<thead>...</thead>
<tfoot>...</tfoot>

<tbody>

<tr>

<td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td>

</tr>

</tbody>

</table>

Alasan untuk itu spanadalah, seperti yang ditunjukkan oleh orang lain, sebuah <td>kehendak biasanya meluas untuk mengakomodasi konten, sedangkan a <span>dapat diberikan -dan diharapkan untuk menjaga- lebar yang ditetapkan; yang overflow: hiddendimaksudkan untuk, tetapi mungkin tidak, menyembunyikan apa yang akan menyebabkan <td>perluasan.

Saya akan merekomendasikan menggunakan titleproperti span untuk menampilkan teks yang ada (atau terpotong) di sel visual, sehingga teks tersebut masih tersedia (dan jika Anda tidak ingin / membutuhkan orang untuk melihatnya, lalu mengapa memilikinya di tempat pertama, saya kira ...).

Juga, jika Anda menentukan lebar untuk td {...}td akan meluas (atau berpotensi berkontraksi, tapi saya ragu) untuk mengisi lebar tersiratnya (seperti yang saya lihat ini sepertinyatable-width/number-of-cells ), lebar tabel yang ditentukan tampaknya tidak dibuat masalah yang sama.

Sisi negatifnya adalah markup tambahan yang digunakan untuk presentasi.


1

Sebenarnya pembungkusan teks terjadi secara otomatis dalam tabel. Kesalahan yang dilakukan orang saat pengujian adalah secara hipotetis mengasumsikan string panjang seperti "ggggggggggggggggggggggggggggggggggggggggggggggg" dan mengeluh bahwa itu tidak membungkus. Praktis tidak ada kata dalam bahasa Inggris yang sepanjang ini dan bahkan jika ada, kecil kemungkinan kata itu akan digunakan di dalamnya <td>.

Cobalah menguji dengan kalimat seperti "Kontra posisi adalah takhayul dalam keadaan yang telah ditentukan sebelumnya".


Ini benar. Tidak dapat memahami mengapa orang menyarankan penggunaan "white-space: nowrap" karena hal itu justru akan melakukan kebalikan dari apa yang diinginkan OP.
mluisbrown

29
Perbaiki tidak ada kata dalam bahasa Inggris yang sepanjang ini tetapi misalkan saya menampilkan jalur file, yang akan terus menerus dan sangat panjang.
keris

2
..Atau daftar angka yang dipisahkan koma panjang misalnya yang sayangnya kebetulan tidak memiliki spasi.
Aditya Sanghi

4
.. Atau nama domain panjang yang bisa mencapai 63 karakter (tidak termasuk ekstensi dan www) http://www.abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijk.com/
Brainfeeder

Saya mencoba memecahkan masalah ini ketika "kata" adalah url yang sangat panjang. Komentar di atas dengan contoh "ggggggggggggggggggggggggggggggggggggggggggggggggg" tidak memperhitungkan url panjang akun.
geekandglitter

0

Terapkan kelas ke TD Anda, terapkan lebar yang sesuai (ingat untuk membiarkan salah satu dari mereka tanpa lebar sehingga mengasumsikan sisa lebar), lalu terapkan gaya yang sesuai. Salin dan tempel kode di bawah ini ke editor dan lihat di browser untuk melihatnya berfungsi.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftcolumn">This is the left column. It is set to 20% width.</td>
    <td class="centercolumn">
        <p>Hi,</p>
        <p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p>
        <p>Need help.</p>
        <p>TIA.</p>
    </td>
    <td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td>
  </tr>
</table>
</body>
</html>

Saya yakin OP, meskipun tidak secara eksplisit menyatakannya, mengalami masalah dengan membungkus konten dinamis non-spasi. Dalam kasus ini, solusi di atas tidak akan berfungsi - jsfiddle.net/qZrFW
user66001

-1
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Poem</th>
    <th>Poem</th>
  </tr>
  <tr>
    <td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
    <td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>
</table>

<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>

</body>
</html>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.