Bagaimana memaksa konten sel tabel <td> untuk membungkus?

146

Inilah seluruh halaman * wrappable didefinisikan dalam file main.css

/* Wrappable cell
* Add this class to make sure the text in a cell will wrap.
* By default, data_table tds do not wrap.
*/
td.wrappable,
table.data_table td.wrappable {
    white-space: normal;
}

Inilah seluruh halaman:

<%@ include file="../../include/pre-header.html" %>
<form id="commentForm" name="commentForm" action="" method="post">



    <ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
        <ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?   entryId=${entry.entryId}" />
        <table class="data_table vert_scroll_table">



            </tr>
            <tr>
                <ctl:sortableTblHdr styleClass="center" title="Comments" property="comment" type="top">Comments</ctl:sortableTblHdr>
            </tr>


            <c:forEach var="comments" items="${entry.comments}">


                <tr id="id${comments.id}">
                    <td id="comments-${comments.id}" class="wrappable" style="width:400px;">${comments.comment}</td>
                </tr>



            </c:forEach>
            <c:if test="${lock.locked || form.entryId < 0 }">
                <%-- This is the row for adding a new comment. --%>
                    <tr id="commentRow">
                        <td><input type="text" id="comment" name="comment" size="50" maxlength="250" onkeypress="javascript:return noenter();" />
                            <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
                        </td>

                    </tr>
            </c:if>

        </table>

    </ctl:vertScroll>
</form>

Itu hanya membentang setiap kali saya kirim.
Halaman ini juga dalam div. Apakah saya perlu mengatur lebar div dan tabel juga?

html css html-table Liburan Doc
sumber
1
Di mana Anda mendefinisikan wrappable?
kanon
2
Di mana .wrappablekelas didefinisikan? browser apa yang Anda gunakan?
Dani
Browser yang digunakan sangat penting --- versi IE lama tidak mendukung max-width. Ada banyak hal lain yang dapat menjadi masalah dan tidak mungkin untuk mengatakan tanpa informasi lebih lanjut, tetapi itu adalah salah satu yang dapat dihancurkan.
Chris Morgan
Saya pada dasarnya hanya mencoba untuk tetap mengirimkan teks agar tetap dalam lebar dan tidak meregangkan meja setelah saya sybmit
Doc Holiday
Ini mungkin membantu stackoverflow.com/a/26560829/1924979
Harsh Vakharia

Jawaban:

292

Gunakan table-layout:fixeddi tabel dan word-wrap:break-worddi td.

Lihat contoh ini:

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>
</body>
</html>

DEMO:

table {border-collapse:collapse; table-layout:fixed; width:310px;}
       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
       <table>
          <tr>
             <td>1</td>
             <td>Lorem Ipsum</td>
             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
             <td>2</td>
             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
             <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
          </tr>
          <tr>
             <td>3</td>
             <td></td>
             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
          </tr>
       </table>
Luaskan cuplikan

jim31415
sumber
Anda harus menambahkan border-collapse: bit runtuh ke bagian atas jawaban Anda sehingga orang-orang yang secara visual memindai jawaban Anda bisa mendapatkan jawaban lengkap dengan cepat.
dwoodwardgb
untuk tabel modifikasi lebih sedikit {border-collapse: collapse; table-layout: fixed; word-wrap: break-word;} table td {width: 100px; word-wrap: break-word;}
Kuldeep Kumar
44

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%
}

Lavekush Agrawal
sumber
15 
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
Jafstar
sumber
6
mungkin Anda bisa menjelaskan kodenya sehingga akan jelas bagi siapa pun
Federico
itu menunjukkan tabel rapi, tetapi konten terpotong; yaitu. tidak dapat melihat beberapa kata jika isinya besar. overflow:hidden
wpcoder
Hardcoding lebar maks tidak baik. Itu tidak akan skala juga untuk resolusi besar, dll. Anda ingin mengizinkan tabel untuk menanggapi ukuran dengan benar.
user959690
4

Jika Anda menggunakan tabel respons Bootstrap, hanya ingin mengatur lebar maksimum untuk satu kolom tertentu dan membuat pembungkus teks, membuat gaya kolom ini sebagai berikut juga berfungsi

max-width:someValue;
word-wrap:break-word
Feng Han
sumber
5
Perhatikan bahwa max-widthharus berupa pxnilai, bukan%
maxedison
3

Ini bekerja untuk saya ketika saya perlu menampilkan JSON "cantik" dalam sel:

td { white-space:pre }

Lebih lanjut tentang white-spaceproperti :

  • normal : Nilai ini mengarahkan agen pengguna untuk menciutkan urutan ruang putih, dan memecah garis yang diperlukan untuk mengisi kotak garis.

  • pre: Nilai ini mencegah agen pengguna dari runtuhnya urutan ruang putih.
    Garis hanya terputus pada karakter baris baru yang dipertahankan.

  • nowrap: Nilai ini menciutkan ruang putih seperti untuk normal, tetapi menekan jeda baris dalam teks.

  • pre-wrap: Nilai ini mencegah agen pengguna dari runtuhnya urutan ruang putih.
    Garis terputus pada karakter baris baru yang dipertahankan, dan sebagaimana diperlukan untuk mengisi kotak baris.

  • pre-line: Nilai ini mengarahkan agen pengguna ke runtuhnya urutan ruang putih.
    Garis terputus pada karakter baris baru yang dipertahankan, dan sebagaimana diperlukan untuk mengisi kotak baris.

(Juga, lihat lebih lanjut di sumbernya .)

ashleedawg
sumber
1

Cukup tambahkan: word-break: break-word; ke kelas tabel Anda.

Sajjad Aljileezi
sumber
0

Jika Anda ingin memperbaiki kolom Anda harus mengatur lebar. Sebagai contoh:

<td style="width:100px;">some data</td>

Eugene
sumber
1
Saya mencoba ... terus memperluas tabel untuk beberapa alasan <td id = "komentar - $ {comments.id}" class = "wrappable" style = "width: 100px"> $ {comments.comment} </ td >
Doc Holiday
0

Ini adalah cara lain untuk mengatasi masalah jika Anda memiliki string panjang (seperti nama jalur file) dan Anda hanya ingin memecah string pada karakter tertentu (seperti garis miring). Anda dapat menyisipkan karakter Unicode Zero Width Space sebelum (atau setelah) garis miring dalam HTML.

Mark Lakata
sumber
0 
.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

Saya telah menguji dengan data biner dan berfungsi dengan baik di sini.

jaip
sumber