CSS text-overflow: ellipsis; tidak bekerja?

Saya tidak tahu mengapa CSS sederhana ini tidak berfungsi ...

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Harus memotong sekitar "Tes" ke-4

text-overflow:ellipsis; hanya berfungsi jika yang berikut ini benar:

• Lebar elemen harus dibatasi dalam px(piksel). Lebar dalam %(persentase) tidak akan berfungsi.
• Elemen harus memiliki overflow:hiddendan white-space:nowrapmengatur.

Alasan Anda mengalami masalah di sini adalah karena elemen widthAnda atidak dibatasi. Anda memang memiliki widthpengaturan, tetapi karena elemen diatur ke display:inline(yaitu default) itu mengabaikannya, dan tidak ada yang membatasi lebar juga.

Anda dapat memperbaikinya dengan melakukan salah satu dari yang berikut:

• Atur elemen ke display:inline-blockatau display:block(mungkin yang pertama, tetapi tergantung pada kebutuhan tata letak Anda).
• Atur salah satu elemen penampungnya display:blockdan beri elemen tersebut perbaikan widthatau max-width.
• Atur elemen ke float:leftatau float:right(mungkin yang pertama, tetapi sekali lagi, salah satu harus memiliki efek yang sama sejauh menyangkut elipsis).

Saya sarankan display:inline-block, karena ini akan memiliki dampak jaminan minimum pada tata letak Anda; ini bekerja sangat mirip dengan display:inlineyang digunakan saat ini sejauh menyangkut tata letak, tetapi jangan ragu untuk bereksperimen dengan poin lain juga; Saya sudah mencoba memberikan info sebanyak mungkin untuk membantu Anda memahami bagaimana hal-hal ini berinteraksi bersama; sebagian besar pemahaman CSS adalah tentang memahami bagaimana berbagai gaya bekerja bersama.

Berikut cuplikan dengan kode Anda, dengan display:inline-blocktambahan, untuk menunjukkan seberapa dekat Anda.

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

<div class="app">
  <a href="">Test Test Test Test Test Test</a>
</div>

Referensi yang berguna:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Jawaban yang diterima luar biasa. Namun, Anda masih bisa menggunakan %lebar dan mencapai text-overflow: ellipsis. Solusinya sederhana:

display: inline-block; /* for em, a, span, etc (inline by default) */
text-overflow: ellipsis;
width: calc (80%); /* The trick is here! */

Tampaknya setiap kali Anda gunakan calc, nilai akhir dirender dalam piksel absolut, yang akibatnya dikonversi 80%menjadi sesuatu seperti 800pxuntuk 1000pxwadah lebar - bandwidth. Karena itu, alih-alih menggunakan width: [YOUR PERCENT]%, gunakan width: calc([YOUR PERCENT]%).

Jadi jika Anda mencapai pertanyaan ini karena Anda kesulitan mencoba membuat elips berfungsi di dalam display: flexwadah, coba tambahkanmin-width: 0 wadah terluar yang meluap-luap induknya meskipun Anda telah menetapkannya overflow: hiddendan melihat bagaimana itu bekerja untuk Anda.

Lebih detail dan contoh kerja pada codepen ini oleh aj-foster . Benar-benar melakukan trik dalam kasus saya.

Pastikan word-wrapjuga diatur ke normal untuk IE10 dan di bawah.

Standar yang dirujuk di bawah ini mendefinisikan perilaku properti ini sebagai tergantung pada pengaturan properti "text-wrap". Namun, pengaturan wordWrap selalu efektif di Windows Internet Explorer karena Internet Explorer tidak mendukung properti "text-wrap".

Oleh karena itu dalam kasus saya, word-wrapdisetel ke break-word (diwarisi atau secara default?) Menyebabkan text-overflowbekerja di FF dan Chrome, tetapi tidak di IE.

info ms pada properti word-wrap

anchor, span... tag adalah elemen inline secara default, Jika widthproperti elemen inline tidak berfungsi. Jadi, Anda harus mengonversi elemen Anda menjadi elemen inline-blockatau block levelelemen

Sertakan empat baris yang ditulis setelah info agar ellipsis berfungsi

.app a
{
 color: #fff;
 font: bold 15px/18px Arial;
 height: 18px;
 margin: 0 5px 0 5px;
 padding: 0;
 position: relative;
 text-align: center;
 text-decoration: none;
 width: 140px;

 /* 
 Note: The Below 4 Lines are necessary for ellipsis to work.
 */

 display: block;/* Change it as per your requirement. */
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

Tambahkan display: block;atau display: inline-block;ke#User_Apps_Content .DLD_App a

demo

Anda cukup menambahkan satu baris css:

.app a {
   display: inline-block;
}

Di bootstrap 4 , Anda bisa menambahkan .text-truncatekelas untuk memotong teks dengan elipsis.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 250px;">
  The quick brown fox jumps over the lazy dog.
</span>

HARUS berisi

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

HARUS TIDAK mengandung

display: inline

HARUS berisi

position: sticky

Anda juga dapat menambahkan float: left; di dalam kelas ini #User_Apps_Content .DLD_App a

Saya harus membuat beberapa elips panjang deskripsi (hanya mengambil satu jalur) sementara menjadi responsif, jadi solusi saya adalah membiarkan bungkus teks (bukan white-space: nowrap) dan bukannya lebar tetap saya menambahkan ketinggian tetap:

span {
  display: inline-block;
  line-height: 1rem;
  height: 1rem;
  overflow: hidden;
  // OPTIONAL LINES
  width: 75%;
  background: green;
  //  white-space: normal; default
}

<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quia quod reprehenderit saepe sit. Animi deleniti distinctio dolorum iste molestias reiciendis saepe. Ea eius ex, ipsam iusto laudantium natus obcaecati quas rem repellat temporibus! A alias at, atque deserunt dignissimos dolor earum, eligendi eveniet exercitationem natus non, odit sint sit tempore voluptate. Commodi culpa ex facere id minima nihil nulla omnis praesentium quasi quia quibusdam recusandae repellat sequi ullam, voluptates. Aliquam commodi debitis delectus magnam nulla, omnis sequi sint unde voluptas voluptatum. Adipisci aliquam deserunt dolor enim facilis libero, maxime molestias, nemo neque non nostrum placeat reprehenderit, rerum ullam vel? A atque autem consectetur cum, doloremque doloribus fugiat hic id iste nemo nesciunt officia quaerat quibusdam quidem quisquam similique sit tempora vel. Accusamus aspernatur at au
</span>

Ini adalah kode yang memungkinkan:

overflow: hidden;
text-overflow: ellipsis;

overflow: diperlukan disembunyikan

Saya menghadapi masalah yang sama dan sepertinya tidak ada solusi di atas yang berfungsi untuk Safari. Untuk browser non-safari, ini berfungsi dengan baik:

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

Untuk Safari, ini yang cocok untuk saya. Perhatikan bahwa kueri media untuk memeriksa apakah peramban adalah Safari mungkin berubah dari waktu ke waktu, jadi coba saja atasi kueri media jika itu tidak berfungsi untuk Anda. Dengan line-clampproperti, juga dimungkinkan untuk memiliki beberapa baris di web dengan elipsis, lihat di sini .

// Media-query for Safari-only browser.
@media not all and (min-resolution: 0.001dpcm) {
  @media {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
  }
}

https://stackoverflow.com/a/53784508/5626747

Tidak dapat berkomentar karena reputasi, jadi saya membuat jawaban lain:

Dalam hal ini Anda juga harus menghapus display: block;properti yang disarankan secara umum dari elemen yang Anda nyalakan text-overflow: ellipsis;, atau akan terputus tanpa ... pada akhirnya.

Tulis ini dalam aturan css Anda.

display: block; /* or in-line block according to your requirement */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;