Mengapa CSS elipsis tidak bekerja di sel tabel?

Pertimbangkan contoh berikut: ( demo langsung di sini )

$(function() {
  console.log("width = " + $("td").width());
});

td {
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

Outputnya adalah width = 139:, dan elipsis tidak muncul.

Apa yang kulewatkan di sini?

Rupanya, menambahkan:

td {
  display: block; /* or inline-block */
}

memecahkan masalah juga.

Solusi lain yang mungkin adalah mengatur table-layout: fixed;untuk tabel, dan juga mengaturnya width. Misalnya: http://jsfiddle.net/fd3Zx/5/

Ini juga penting untuk dimasukkan

table-layout:fixed;

Ke tabel yang berisi, jadi itu beroperasi dengan baik di IE9 (jika Anda menggunakan max-width) juga.

Seperti yang dikatakan sebelumnya, Anda bisa menggunakan td { display: block; }tetapi ini mengalahkan tujuan menggunakan tabel.

Anda dapat menggunakan table { table-layout: fixed; }tetapi mungkin Anda ingin berperilaku berbeda untuk beberapa colum.

Jadi cara terbaik untuk mencapai apa yang Anda inginkan adalah dengan membungkus teks Anda dalam <div>dan menerapkan CSS Anda ke <div>(bukan ke <td>) seperti ini:

td {
  border: 1px solid black;
}
td > div {
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Coba gunakan max-widthalih-alih width, tabel akan tetap menghitung lebar secara otomatis.

Bekerja bahkan dalam ie11(dengan mode kompatibilitas ie8).

td.max-width-50 {
  border: 1px solid black;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
  <tbody>
    <tr>
      <td class="max-width-50">Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
    <tr>
      <td>Hello Stack Overflow</td>
    </tr>
  </tbody>
</table>

jsfiddle .

Halaman demo

Untuk tabel dengan lebar dinamis, saya menemukan cara di bawah ini untuk menghasilkan hasil yang memuaskan. Masing-masing <th>yang ingin memiliki kemampuan teks-dipangkas harus memiliki elemen pembungkus dalam yang membungkus isi <th>izin text-overflowuntuk bekerja.

Trik sebenarnya adalah mengatur max-width(pada <th>) dalam vwsatuan .

Ini secara efektif akan menyebabkan lebar elemen menjadi "terikat" ke lebar viewport (jendela browser) dan akan menghasilkan kliping konten yang responsif. Atur vwunit ke nilai memuaskan yang dibutuhkan.

CSS minimal:

th{ max-width:10vw; }
      
th > .wrap{ 
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}

Ini demo yang bisa dijalankan:

table {
  font: 18px Arial;
  width: 40%;
  margin: 1em auto;
  color: #333;
  border: 1px solid rgba(153, 153, 153, 0.4);
}

table td, table th {
  text-align: left;
  padding: 1.2em 20px;
  white-space: nowrap;
  border-left: 1px solid rgba(153, 153, 153, 0.4);
}

table td:first-child, table th:first-child {
  border-left: 0;
}

table th {
  border-bottom: 1px solid rgba(153, 153, 153, 0.4);
  font-weight: 400;
  text-transform: uppercase;
  max-width: 10vw;
}

table th > .wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<table>
    <thead>
        <tr>
            <th>
                <div class="wrap" title="Some long title">Some long title</div>
            </th>
            <th>
                <div class="wrap">Short</div>
            </th>
            <th>
                <div class="wrap">medium one</div>
            </th>
            <th>
                <div class="wrap" title="endlessly super long title which no developer likes to see">endlessly super long title which no developer likes to see</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>very long text here</td>
        </tr>
    </tbody>
</table>

Hanya menawarkan alternatif karena saya mempunyai masalah ini dan tidak ada jawaban lain di sini yang memiliki efek yang saya inginkan. Jadi alih-alih saya menggunakan daftar. Sekarang secara semantik informasi yang saya hasilkan dapat dianggap sebagai data tabular tetapi juga data yang terdaftar.

Jadi pada akhirnya yang saya lakukan adalah:

<ul>
    <li class="group">
        <span class="title">...</span>
        <span class="description">...</span>
        <span class="mp3-player">...</span>
        <span class="download">...</span>
        <span class="shortlist">...</span>
    </li>
    <!-- looped <li> -->
</ul>

Jadi pada dasarnya uladalah table, liadalah tr, dan spansekarang td.

Kemudian di CSS saya mengatur spanelemen menjadi display:block;dan float:left;(saya lebih suka kombinasi inline-blockitu karena akan bekerja di versi IE yang lebih lama, untuk menghapus efek float lihat: http://css-tricks.com/snippets/css/clear- memperbaiki / ) dan juga memiliki elips:

span {
    display: block;
    float: left;
    width: 100%;

    // truncate when long
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Kemudian semua yang Anda lakukan adalah mengatur max-widthsrentang Anda dan itu akan memberikan daftar tampilan tabel.

Alih-alih menggunakan ellipsis untuk menyelesaikan masalah teks yang meluap, saya menemukan bahwa input yang dinonaktifkan dan ditata terlihat lebih baik dan masih memungkinkan pengguna untuk melihat dan memilih seluruh string jika perlu.

<input disabled='disabled' style="border: 0; padding: 0; margin: 0" />

Itu tampak seperti bidang teks tetapi mampu menyorot sehingga lebih ramah pengguna

Periksa box-sizingproperti css dari tdelemen Anda . Saya punya masalah dengan template css yang menetapkan border-boxnilai. Anda perlu mengatur box-sizing: content-box.

Biarkan meja Anda apa adanya. Hanya membungkus konten di dalam TD dengan rentang yang diterapkan pemotongan CSS.

/* CSS */
.truncate {
    width: 50px; /*your fixed width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block; /* this fixes your issue */
}

<!-- HTML -->
<table>
    <tbody>
        <tr>
            <td>
                <span class="truncate">
                    Table data to be truncated if it's too long.
                </span>
            </td>
        </tr>
    </tbody>
</table>

Jika Anda tidak ingin mengatur max-width ke td (seperti dalam jawaban ini ), Anda dapat mengatur max-width ke div:

function so_hack(){}

function so_hack(){} http://jsfiddle.net/fd3Zx/754/ function so_hack(){}

function so_hack(){}

Catatan: 100% tidak berfungsi, tetapi 99% berhasil di FF. Browser modern lainnya tidak perlu hack div konyol.

td {
  perbatasan: 1px hitam pekat;
    padding-left: 5px;
    padding-right: 5px;
}
td> div {
    lebar maks: 99%;
    overflow: disembunyikan;
    text-overflow: ellipsis;
    white-space: nowrap;

}