Bungkus teks dalam tag <td>

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

Untuk membungkus teks TD

Gaya meja set pertama

table{
    table-layout: fixed;
}

lalu atur TD Style

td{
    word-wrap:break-word
}

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

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 .

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>

.tbl {
    table-layout:fixed;
    border-collapse: collapse;
    background: #fff;
 }

.tbl td {
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

Penghargaan untuk http://www.blakems.com/archives/000077.html

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>

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

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.

Saya punya beberapa tddengan:

white-space: pre;

Ini menyelesaikannya untuk saya:

white-space: pre-wrap;

Untuk membuat lebar sel persis sama dengan kata terpanjang dalam teks, cukup atur lebar sel menjadi 1px

yaitu

td {
  width: 1px;
}

Ini bersifat eksperimental dan saya mengetahui hal ini saat melakukan uji coba

Biola langsung: http://jsfiddle.net/harshjv/5e2oLL8L/2/

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.

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".

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>

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