CSS text-overflow dalam sel tabel?

Saya ingin menggunakan CSS text-overflowdalam sel tabel, sehingga jika teks terlalu panjang untuk muat pada satu baris, itu akan klip dengan ellipsis alih-alih membungkus ke beberapa baris. Apakah ini mungkin?

Saya mencoba ini:

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

Tetapi white-space: nowraptampaknya membuat teks (dan selnya) terus berkembang ke kanan, mendorong total lebar tabel melampaui lebar wadahnya. Tanpa itu, bagaimanapun, teks terus membungkus ke beberapa baris ketika menyentuh tepi sel.

Untuk klip teks dengan elipsis ketika melimpah sel tabel, Anda perlu mengatur max-widthproperti CSS di setiap tdkelas agar overflow berfungsi. Tidak diperlukan layout layout tambahan

td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Untuk tata letak yang responsif; gunakan max-widthproperti CSS untuk menentukan lebar minimum efektif kolom, atau cukup gunakan max-width: 0;untuk fleksibilitas tak terbatas. Juga, tabel yang berisi akan membutuhkan lebar tertentu, biasanya width: 100%;, dan kolom biasanya akan memiliki lebar yang ditetapkan sebagai persentase dari total lebar

table {
    width: 100%;
}
td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
td.columnA {
    width: 30%;
}
td.columnB {
    width: 70%;
}

Historis: Untuk IE 9 (atau kurang) Anda harus memiliki ini di HTML Anda, untuk memperbaiki masalah rendering khusus IE

<!--[if IE]>
<style>
    table {
        table-layout: fixed;
        width: 100px;
    }
</style>
<![endif]-->

Menentukan max-widthlebar tetap atau tidak berfungsi untuk semua situasi, dan tabel harus cair dan ruang otomatis sel-selnya. Untuk itulah tabel itu dibuat.

Gunakan ini: http://jsfiddle.net/maruxa1j/

HTML:

<td class="ellipsis">
    <span>This Text Overflows and is too large for its cell.</span>
</td>

CSS:

.ellipsis {
    position: relative;
}
.ellipsis:before {
    content: ' ';
    visibility: hidden;
}
.ellipsis span {
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Bekerja pada IE9 dan browser lainnya.

Mengapa ini terjadi?

Tampaknya bagian ini di w3.org menyarankan bahwa teks-overflow hanya berlaku untuk memblokir elemen :

11.1.  Overflow Ellipsis: the ‘text-overflow’ property

text-overflow      clip | ellipsis | <string>  
Initial:           clip   
APPLIES TO:        BLOCK CONTAINERS               <<<<
Inherited:         no  
Percentages:       N/A  
Media:             visual  
Computed value:    as specified  

The MDN mengatakan hal yang sama .

Jsfiddle ini memiliki kode Anda (dengan beberapa modifikasi debug), yang berfungsi dengan baik jika diterapkan pada diva td. Ini juga memiliki satu-satunya solusi yang dapat saya pikirkan dengan cepat, dengan membungkus isi blok yang tdmengandung div. Namun, itu terlihat seperti markup "jelek" bagi saya, jadi saya berharap orang lain memiliki solusi yang lebih baik. Kode untuk menguji ini terlihat seperti ini:

td, div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid red;
  width: 80px;
}

Works, but no tables anymore:
<div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div>

Works, but non-semantic markup required:
<table><tr><td><div>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</div></td></tr></table>

Jika Anda tidak ingin mengatur lebar tetap untuk apa pun

Solusi di bawah ini memungkinkan Anda untuk memiliki konten sel tabel yang panjang, tetapi tidak boleh memengaruhi lebar tabel induk, atau ketinggian baris induk. Misalnya di mana Anda ingin memiliki tabel dengan width:100%yang masih menerapkan fitur ukuran otomatis ke semua sel lainnya. Berguna dalam kisi data dengan kolom "Catatan" atau "Komentar" atau sesuatu.

Tambahkan 3 aturan ini ke CSS Anda:

.text-overflow-dynamic-container {
    position: relative;
    max-width: 100%;
    padding: 0 !important;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    vertical-align: text-bottom !important;
}
.text-overflow-dynamic-ellipsis {
    position: absolute;
    white-space: nowrap;
    overflow-y: visible;
    overflow-x: hidden;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    width:100%;
    top: 0;
    left: 0;
}
.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
    content: '-';
    display: inline;
    visibility: hidden;
    width: 0;
}

Format HTML seperti ini di setiap sel tabel yang Anda inginkan teks dinamis melimpah:

<td>
  <span class="text-overflow-dynamic-container">
    <span class="text-overflow-dynamic-ellipsis" title="...your text again for usability...">
      //...your long text here...
    </span>
  </span>
</td>

Selain itu menerapkan yang diinginkan min-width(atau tidak sama sekali) ke sel tabel.

Tentu saja biola: https://jsfiddle.net/9wycg99v/23/

Tampaknya jika Anda menentukan table-layout: fixed;pada tableelemen, maka gaya Anda untuk tdakan berlaku. Ini juga akan mempengaruhi bagaimana ukuran sel.

Sitepoint membahas metode tata letak tabel sedikit di sini: http://reference.sitepoint.com/css/tableformatting

Jika Anda hanya ingin tabel untuk tata letak otomatis

Tanpa menggunakan max-width, atau persentase lebar kolom, atau table-layout: fixeddll.

https://jsfiddle.net/tturadqq/

Bagaimana itu bekerja:

Langkah 1: Biarkan tata letak tabel otomatis melakukan tugasnya.

Ketika ada satu atau lebih kolom dengan banyak teks, itu akan menyusutkan kolom lainnya sebanyak mungkin, lalu bungkus teks dari kolom panjang:

Langkah 2: Bungkus konten sel dalam div, lalu atur div itu ke max-height: 1.1em

(ekstra 0,1em adalah untuk karakter yang merender sedikit di bawah basis teks, seperti ekor 'g' dan 'y')

Langkah 3: Atur titlediv

Ini bagus untuk aksesibilitas, dan diperlukan untuk sedikit trik yang akan kita gunakan sebentar lagi.

Langkah 4: Tambahkan CSS ::afterpada div

Ini agak sulit. Kami menetapkan CSS ::after, dengan content: attr(title), lalu posisikan itu di atas div dan set text-overflow: ellipsis. Saya sudah mewarnainya merah di sini untuk membuatnya jelas.

(Perhatikan bagaimana kolom panjang sekarang memiliki elipsis tailing)

Langkah 5: Atur warna teks div ke transparent

Dan kita sudah selesai!

Ketika itu dalam persentase lebar tabel, atau Anda tidak dapat menetapkan lebar tetap pada sel tabel. Anda dapat mendaftar table-layout: fixed;untuk membuatnya berfungsi.

table {
  table-layout: fixed;
  width: 100%;
}
td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid red;
}

<table>
  <tr>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
    <td>Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah. Lorem ipsum and dim sum yeah yeah yeah.</td>
  </tr>
</table>

Bungkus konten sel dalam blok fleksibel. Sebagai bonus, sel otomatis cocok dengan lebar yang terlihat.

table {
  width: 100%;
}

div.parent {
  display: flex;
}

div.child {
  flex: 1;
  width: 1px;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

<table>
  <tr>
    <td>
      <div class="parent">
        <div class="child">
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
      <div>
    </td>
  </tr>
</table>

Saya memecahkan ini menggunakan div yang benar-benar diposisikan di dalam sel (relatif).

td {
    position: relative;
}
td > div {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;        
}

Itu dia. Kemudian Anda bisa menambahkan top: nilai ke div atau pusatkan secara vertikal:

td > div {      
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 1.5em; // = line height 
}

Untuk mendapatkan ruang di sisi kanan, Anda dapat mengurangi sedikit lebar maks.

Ini berfungsi dalam kasus saya, di Firefox dan Chrome:

td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

Ini adalah versi yang berfungsi di IE 9.

http://jsfiddle.net/s27gf2n8/

<div style="display:table; table-layout: fixed; width:100%; " >
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">First row. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Top right Cell.
            </div>
        </div>
        <div style="display:table-row;">
            <div style="display:table-cell;">
                <table style="width: 100%; table-layout: fixed;">
                    <div style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Second row - Lorem Ipsum is simply dummy text of the printing and typesetting industry. 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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                </table>
            </div>
            <div style="display:table-cell;">
                Bottom right cell.
            </div>
        </div>
    </div>