CSS: Memotong sel tabel, tapi muat sebanyak mungkin

Temui Fred. Dia adalah sebuah meja:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

Apartemen Fred memiliki kebiasaan aneh dalam mengubah ukuran, jadi dia belajar menyembunyikan sebagian isinya agar tidak mendorong semua unit lain dan mendorong ruang tamu Ny. Whitford untuk dilupakan:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

Ini bekerja, tetapi Fred memiliki perasaan mengomel bahwa jika sel kanannya (yang dia juluki Celldito) menyerah sedikit, sel kirinya tidak akan terpotong sepanjang waktu. Bisakah kamu menyelamatkan kewarasannya?

Singkatnya: Bagaimana sel-sel tabel dapat melimpah secara merata, dan hanya ketika mereka semua telah menyerahkan semua spasi putihnya?

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

http://jsfiddle.net/7CURQ/

Saya yakin saya punya solusi non-javascript! Lebih baik terlambat daripada tidak, kan? Bagaimanapun, ini adalah pertanyaan yang sangat bagus dan Google sudah mengatasinya. Saya tidak ingin menerima perbaikan javascript karena saya menemukan sedikit kegelisahan tentang hal-hal yang bergerak setelah halaman dimuat menjadi tidak dapat diterima.

Fitur :

• Tidak ada javascript
• Tidak ada tata letak yang diperbaiki
• Tidak ada trik berbobot atau persentase lebar
• Bekerja dengan sejumlah kolom
• Pembuatan sisi server dan pembaruan sisi klien yang sederhana (tidak perlu perhitungan)
• Kompatibel lintas browser

Cara kerjanya : Di dalam sel tabel, tempatkan dua salinan konten dalam dua elemen berbeda dalam elemen kontainer yang diposisikan relatif. Elemen spacer diposisikan secara statis dan karenanya akan mempengaruhi lebar sel tabel. Dengan membiarkan isi sel spacer untuk membungkus kita bisa mendapatkan "paling cocok" lebar sel tabel yang kita cari. Ini juga memungkinkan kami untuk menggunakan elemen yang diposisikan benar-benar untuk membatasi lebar konten yang terlihat dengan induk yang diposisikan relatif.

Diuji dan bekerja di: IE8, IE9, IE10, Chrome, Firefox, Safari, Opera

Gambar Hasil :

JSFiddle : http://jsfiddle.net/zAeA2/

Contoh HTML / CSS :

<td>
    <!--Relative-positioned container-->
    <div class="container">
        <!--Visible-->
        <div class="content"><!--Content here--></div>
        <!--Hidden spacer-->
        <div class="spacer"><!--Content here--></div>
        <!--Keeps the container from collapsing without
            having to specify a height-->
        <span>&nbsp;</span>
     </div>
</td>

.container {
    position: relative;
}
.content {
    position: absolute;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spacer {
    height: 0;
    overflow: hidden;
}

Saya telah menghadapi tantangan yang sama beberapa hari yang lalu. Tampaknya Lucifer Sam menemukan solusi terbaik.

Tapi saya perhatikan Anda harus menduplikasi konten di elemen spacer. Saya pikir itu tidak terlalu buruk, tetapi saya juga ingin menerapkan titlepopup untuk teks terpotong. Dan itu berarti teks panjang akan muncul ketiga kali dalam kode saya.

Di sini saya mengusulkan untuk mengakses titleatribut dari :afterpseudo-element untuk menghasilkan spacer dan menjaga HTML tetap bersih.

Bekerja pada IE8 +, FF, Chrome, Safari, Opera

<table border="1">
  <tr>
    <td class="ellipsis_cell">
      <div title="This cells has more content">
        <span>This cells has more content</span>
      </div>
    </td>
    <td class="nowrap">Less content here</td>
  </tr>
</table>

.ellipsis_cell > div {
    position: relative;
    overflow: hidden;
    height: 1em;
}

/* visible content */
.ellipsis_cell > div > span {
    display: block;
    position: absolute; 
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

/* spacer content */
.ellipsis_cell > div:after {
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

http://jsfiddle.net/feesler/HQU5J/

Jika Javascript dapat diterima, saya menyusun rutinitas cepat yang dapat Anda gunakan sebagai titik awal. Secara dinamis mencoba untuk menyesuaikan lebar sel menggunakan lebar bagian dalam rentang, sebagai reaksi terhadap peristiwa ukuran jendela.

Saat ini diasumsikan bahwa setiap sel biasanya mendapatkan 50% dari lebar baris, dan itu akan menutup sel kanan untuk menjaga sel kiri pada lebar maksimum untuk menghindari meluap. Anda bisa menerapkan logika penyeimbang lebar yang jauh lebih kompleks, tergantung pada kasus penggunaan Anda. Semoga ini membantu:

Markup untuk baris yang saya gunakan untuk pengujian:

<tr class="row">
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
</tr>

JQuery yang menghubungkan acara pengubahan ukuran:

$(window).resize(function() {
    $('.row').each(function() {
        var row_width = $(this).width();
        var cols = $(this).find('td');
        var left = cols[0];
        var lcell_width = $(left).width();
        var lspan_width = $(left).find('span').width();
        var right = cols[1];
        var rcell_width = $(right).width();
        var rspan_width = $(right).find('span').width();

        if (lcell_width < lspan_width) {
            $(left).width(row_width - rcell_width);
        } else if (rcell_width > rspan_width) {
            $(left).width(row_width / 2);
        }
    });
});

Ada solusi yang jauh lebih mudah dan lebih elegan.

Di dalam sel tabel yang ingin Anda terapkan pemotongan, cukup sertakan div kontainer dengan tata letak tabel css: diperbaiki. Wadah ini mengambil lebar penuh sel tabel induk, sehingga bahkan bertindak responsif.

Pastikan untuk menerapkan pemotongan ke elemen dalam tabel.

Bekerja dari IE8 +

<table>
  <tr>
    <td>
     <div class="truncate">
       <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
     </div>
    </td>
    <td class="some-width">
       I'm just text
    </td>
  </tr>
</table>

dan css:

    .truncate {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    h1.truncated {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

inilah Fiddle yang berfungsi https://jsfiddle.net/d0xhz8tb/

Masalahnya adalah 'table-layout: fixed' yang membuat kolom dengan lebar spasi tetap. Tetapi menonaktifkan properti-css ini akan membunuh text-overflow karena tabel akan menjadi sebesar mungkin (dan tidak ada yang ingin meluap).

Maaf, tetapi dalam hal ini Fred tidak dapat memiliki kue dan memakannya .. kecuali jika pemiliknya memberi Celldito lebih sedikit ruang untuk bekerja, Fred tidak dapat menggunakan ...

Anda dapat mencoba "memberi bobot" pada kolom tertentu, seperti ini:

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="80%" />
        <col width="20%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td>Less content here.</td>
    </tr>
</table>

Anda juga dapat mencoba beberapa tweak yang lebih menarik, seperti menggunakan kolom bandwidth 0% dan menggunakan beberapa kombinasi white-spaceproperti CSS.

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td>This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

Anda mendapatkan idenya.

Ya saya akan mengatakan tiga puluh tidak memilikinya, tidak ada cara untuk melakukannya kecuali Anda menggunakan metode js. Anda berbicara tentang serangkaian kondisi render kompleks yang harus Anda tetapkan. misalnya apa yang terjadi ketika kedua sel menjadi terlalu besar untuk apartemen mereka, Anda harus memutuskan siapa yang memiliki prioritas atau hanya memberi mereka persentase dari area dan jika mereka berlebihan mereka akan mengambil area itu dan hanya jika ada yang memiliki spasi Anda meregangkan kaki di sel lain, atau tidak ada cara untuk melakukannya dengan css. Meskipun ada beberapa hal yang cukup funky yang dilakukan orang dengan css yang belum saya pikirkan. Saya benar-benar ragu Anda bisa melakukan ini.

Seperti jawaban samplebias, sekali lagi jika Javascript adalah jawaban yang dapat diterima, saya membuat plugin jQuery khusus untuk tujuan ini: https://github.com/marcogrcr/jquery-tableoverflow

Untuk menggunakan plugin ketikkan saja

$('selector').tableoverflow();

Contoh lengkap: http://jsfiddle.net/Cw7TD/3/embedded/result/

Suntingan:

• Perbaiki di jsfiddle untuk kompatibilitas IE.
• Perbaiki di jsfiddle untuk kompatibilitas browser yang lebih baik (Chrome, Firefox, IE8 +).

Gunakan beberapa css hack, tampaknya display: table-column;bisa menyelamatkan:

<div class="myTable">
    <div class="flexibleCell">A very long piece of content in first cell, long enough that it would normally wrap into multiple lines.</div>
    <div class="staticCell">Less content</div>
</div>

.myTable {
    display: table;
    width: 100%;
}

.myTable:before {
    display: table-column;
    width: 100%;
    content: '';
}

.flexibleCell {
    display: table-cell;
    max-width:1px;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}

.staticCell {
    white-space: nowrap;
}

JSFiddle: http://jsfiddle.net/blai/7u59asyp/

Cukup tambahkan aturan berikut ke td:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// These ones do the trick
width: 100%;
max-width: 0;

Contoh:

table {
  width: 100%
}

td {
  white-space: nowrap;
}

.td-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 0;
}

<table border="1">
  <tr>
    <td>content</td>
    <td class="td-truncate">long contenttttttt ttttttttt ttttttttttttttttttttttt tttttttttttttttttttttt ttt tttt ttttt ttttttt tttttttttttt ttttttttttttttttttttttttt</td>
    <td>other content</td>
  </tr>
</table>

PS: Jika Anda ingin mengatur lebar kustom ke tdproperti penggunaan lain min-width.

Pertanyaan ini muncul di bagian atas Google, jadi dalam kasus saya, saya menggunakan potongan css dari https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ tetapi menerapkannya pada td TIDAK memberikan hasil yang diinginkan.

Saya harus menambahkan tag div di sekitar teks di td dan elipsis akhirnya berfungsi.

Kode HTML Singkatan;

<table style="width:100%">
 <tr>
    <td><div class='truncate'>Some Long Text Here</div></td>
 </tr>
</table>

CSS disingkat;

.truncate { width: 300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

Periksa apakah "nowrap" menyelesaikan masalah sampai batas tertentu. Catatan: nowrap tidak didukung dalam HTML5

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
<tr>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >This cells has more content  </td>
    <td style="overflow: hidden; text-overflow: ellipsis;" nowrap >Less content here has more content</td>
</tr>

Anda dapat mengatur lebar sel kanan ke minimum lebar yang diperlukan, lalu menerapkan overflow-hidden + text-overflow ke bagian dalam sel kiri, tetapi Firefox bermasalah di sini ...

meskipun, tampaknya, flexbox dapat membantu

Saya baru-baru ini mengerjakannya. Lihatlah tes jsFiddle ini , cobalah sendiri mengubah lebar tabel dasar untuk memeriksa perilaku).

Solusinya adalah dengan menyematkan tabel ke tabel lain:

<table style="width: 200px;border:0;border-collapse:collapse">
    <tbody>
        <tr>
            <td style="width: 100%;">
                <table style="width: 100%;border:0;border-collapse:collapse">
                    <tbody>
                        <tr>
                            <td>
                                <div style="position: relative;overflow:hidden">
                                    <p>&nbsp;</p>
                                    <p style="overflow:hidden;text-overflow: ellipsis;position: absolute; top: 0pt; left: 0pt;width:100%">This cells has more content</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="white-space:nowrap">Less content here</td>
        </tr>
    </tbody>
</table>

Apakah Fred sekarang senang dengan ekspansi Celldito?

Tidak tahu apakah ini akan membantu siapa pun, tapi saya memecahkan masalah yang sama dengan menentukan ukuran lebar spesifik dalam persentase untuk setiap kolom. Jelas, ini akan bekerja paling baik jika setiap kolom memiliki konten dengan lebar yang tidak terlalu bervariasi.

Saya memiliki masalah yang sama, tetapi saya perlu menampilkan beberapa baris (jika text-overflow: ellipsis;gagal). Saya menyelesaikannya dengan menggunakan textareadi dalam TDdan kemudian gaya untuk berperilaku seperti sel tabel.

    textarea {
        margin: 0;
        padding: 0;
        width: 100%;
        border: none;
        resize: none;

        /* Remove blinking cursor (text caret) */
        color: transparent;
        display: inline-block;
        text-shadow: 0 0 0 black; /* text color is set to transparent so use text shadow to draw the text */
        &:focus {
            outline: none;
        }
    }

Mengingat bahwa 'tata letak tabel: diperbaiki' adalah persyaratan tata letak yang penting, bahwa ini menciptakan kolom yang tidak dapat disetel secara merata, tetapi bahwa Anda perlu membuat sel dengan lebar persentase berbeda, mungkin mengatur 'colspan' sel Anda menjadi beberapa?

Misalnya, menggunakan lebar total 100 untuk perhitungan persentase mudah, dan mengatakan bahwa Anda memerlukan satu sel 80% dan 20% lainnya, pertimbangkan:

<TABLE width=100% style="table-layout:fixed;white-space:nowrap;overflow:hidden;">
     <tr>
          <td colspan=100>
               text across entire width of table
          </td>
     <tr>
          <td colspan=80>
               text in lefthand bigger cell
          </td>
          <td colspan=20>
               text in righthand smaller cell
          </td>
</TABLE>

Tentu saja, untuk kolom 80% dan 20%, Anda bisa mengatur colspan sel lebar 100% menjadi 5, 80% menjadi 4, dan 20% menjadi 1.