Bungkus kata dalam tabel HTML

Saya telah menggunakan word-wrap: break-worduntuk membungkus teks dalam divs dan spans. Namun, sepertinya tidak berfungsi dalam sel tabel. Saya memiliki tabel yang disetel width:100%, dengan satu baris dan dua kolom. Teks dalam kolom, meskipun ditata dengan yang di atas word-wrap, tidak membungkus. Ini menyebabkan teks melewati batas sel. Ini terjadi pada Firefox, Google Chrome dan Internet Explorer.

Seperti apa sumbernya:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Kata panjang di atas lebih besar dari batas halaman saya, tetapi tidak putus dengan HTML di atas. Saya sudah mencoba saran di bawah ini untuk menambahkan text-wrap:suppressdan text-wrap:normal, tetapi tidak ada yang membantu.

Berikut ini berfungsi untuk saya di Internet Explorer. Perhatikan penambahan table-layout:fixedatribut CSS

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

<td style="word-break:break-all;">longtextwithoutspace</td>

atau

<span style="word-break:break-all;">longtextwithoutspace</span>

Tembakan panjang, tapi periksa dengan Firebug (atau serupa) bahwa Anda tidak sengaja mewarisi aturan berikut:

white-space:nowrap;

Ini dapat mengesampingkan perilaku break line yang Anda tentukan.

Ternyata tidak ada cara yang baik untuk melakukan ini. Yang paling dekat dengan saya adalah menambahkan "overflow: hidden;" ke div di sekitar meja dan kehilangan teks. Solusi sebenarnya tampaknya adalah untuk parit tabel. Menggunakan divs dan posisi relatif saya dapat mencapai efek yang sama, minus warisan<table>

UPDATE 2015: Ini untuk orang-orang seperti saya yang menginginkan jawaban ini. Setelah 6 tahun, ini berhasil, terima kasih kepada semua kontributor.

* { // this works for all but td
  word-wrap:break-word;
}

table { // this somehow makes it work for td
  table-layout:fixed;
  width:100%;
}

Seperti disebutkan, menempatkan teks dalam divhampir berfungsi. Anda hanya perlu menentukan widthdaridiv , yang beruntung untuk layout yang statis.

Ini berfungsi pada FF 3.6, IE 8, Chrome.

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

Penanganan masalah yang menggunakan overflow-wrap dan berfungsi dengan baik dengan tata letak tabel normal + lebar tabel 100%

https://jsfiddle.net/krf0v6pw/

HTML

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

CSS

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

Manfaat:

• Gunakan overflow-wrap:break-wordbukanword-break:break-all . Yang lebih baik karena mencoba untuk memecahkan ruang terlebih dahulu, dan memotong kata hanya jika kata itu lebih besar dari itu wadah.
• Tidak table-layout:fixeddibutuhkan Gunakan ukuran otomatis reguler Anda.
• Tidak perlu mendefinisikan piksel tetap widthatau tetap max-width. Tentukan %induknya jika perlu.

Diuji dalam FF57, Chrome62, IE11, Safari11

Ubah kode Anda

word-wrap: break-word;

untuk

word-break:break-all;

Contoh

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

Masalah dengan

<td style="word-break:break-all;">longtextwithoutspace</td>

adalah bahwa itu akan berfungsi tidak begitu baik ketika teks memiliki beberapa spasi, mis

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

Jika kata andthenlongerwithoutspacescocok dengan sel tabel dalam satu baris tetapi long text with andthenlongerwithoutspacestidak, kata panjang akan dipecah menjadi dua, bukannya dibungkus.

Solusi alternatif: masukkan U + 200B ( ZWSP ), U + 00AD ( soft hyphen ) atau U + 200C ( ZWNJ ) di setiap kata panjang setelah setiap, katakanlah, karakter 20 (namun, lihat peringatan di bawah):

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Peringatan : memasukkan karakter tambahan dengan panjang nol tidak memengaruhi pembacaan. Namun, itu mempengaruhi teks yang disalin ke clipboard (karakter ini tentu saja disalin juga). Jika teks clipboard nantinya digunakan dalam beberapa fungsi pencarian di aplikasi web ... pencarian akan rusak. Meskipun solusi ini dapat dilihat di beberapa aplikasi web terkenal, hindari jika memungkinkan.

Peringatan : saat memasukkan karakter tambahan, Anda tidak harus memisahkan beberapa titik kode dalam grapheme. Lihat https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries untuk info lebih lanjut.

Lihat demo ini

   <table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <span style="display: inline;">Foo</span>
        </td>
    </tr>
</table>

Inilah tautan untuk membaca

Diuji dalam IE 8 dan Chrome 13.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Ini menyebabkan tabel sesuai dengan lebar halaman dan setiap kolom mengambil 50% dari lebar.

Jika Anda lebih suka kolom pertama untuk mengambil lebih banyak halaman, tambahkan width: 80%ke tdseperti dalam contoh berikut, menggantikan 80% dengan persentase pilihan Anda.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Satu-satunya hal yang perlu dilakukan adalah menambahkan lebar ke <td>atau di <div>dalam<td> tergantung pada tata letak yang ingin Anda capai.

misalnya:

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

atau

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

Jawaban yang memenangkan hadiah itu benar, tetapi tidak berfungsi jika baris pertama tabel memiliki sel yang digabung / bergabung (semua sel mendapatkan lebar yang sama).

Dalam hal ini Anda harus menggunakan colgroupdan coltag untuk menampilkannya dengan benar:

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

Tampaknya Anda perlu mengatur word-wrap:break-word;elemen blok ( div), dengan lebar yang ditentukan (bukan relatif). Ex:

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

atau menggunakan word-break:break-allsesuai saran Abhishek Simon.

Ini bekerja untuk saya:

<style type="text/css">
    td {

        /* CSS 3 */
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
    }

Dan atribut tabel adalah:

   table {
      table-layout: fixed;
      width: 100%
   }

</style>

Jika Anda tidak memerlukan batas tabel, terapkan ini:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

Saya menemukan solusi yang sepertinya berfungsi di Firefox, Google Chrome dan Internet Explorer 7-9. Untuk melakukan tata letak tabel dua kolom dengan teks panjang di satu sisi. Saya mencari di seluruh untuk masalah yang sama, dan apa yang bekerja di satu browser memecah yang lain, atau menambahkan lebih banyak tag ke tabel sepertinya pengkodean yang buruk.

Saya TIDAK menggunakan tabel untuk ini. DL DT DD untuk menyelamatkan. Setidaknya untuk memperbaiki tata letak dua kolom, yang pada dasarnya adalah pengaturan glosarium / kamus / arti kata.

Dan beberapa gaya generik.

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

Menggunakan kata-mengambang dan margin tersisa, saya mendapatkan apa yang saya butuhkan. Hanya berpikir saya akan berbagi ini dengan orang lain, mungkin itu akan membantu orang lain dengan tata letak gaya definisi dua kolom, dengan kesulitan mendapatkan kata-kata untuk membungkus.

Saya mencoba menggunakan kata-bungkus dalam sel tabel, tetapi hanya bekerja di Internet Explorer 9, (dan Firefox dan Google Chrome tentu saja) terutama mencoba untuk memperbaiki browser Internet Explorer yang rusak di sini.

Tabel dibungkus secara default, jadi pastikan tampilan sel tabel adalah table-cell:

td {
   display: table-cell;
}

style = "table-layout: fixed; width: 98%; word-wrap: break-word"

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

Demo - http://jsfiddle.net/Ne4BR/749/

Ini bekerja baik untuk saya. Saya memiliki tautan panjang yang akan menyebabkan tabel melebihi 100% di browser web. Diuji pada IE, Chrome, Android dan Safari.

Solusi yang bekerja dengan Google Chrome dan Firefox (tidak diuji dengan Internet Explorer) adalah ditetapkan display: table-cellsebagai elemen blok.

Anda dapat mencoba ini jika itu cocok untuk Anda ...

Letakkan teks di dalam td Anda dan nonaktifkan dengan warna latar belakang putih dan tentukan jumlah barisnya.

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>