CSS text-overflow: ellipsis; tidak bekerja?


368

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




FF only - jika filter diterapkan, elipsis tidak akan ditampilkan. bug dibuka
vsync

1
Saya menulis posting tentang memecahkan masalah dengan text-overflow : brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow
Fausto NA

1
dalam kasus saya, menghapus tampilan: flex dari elemen membantu
Eduard

Jawaban:


909

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:


12
Bagaimana jika saya tidak dapat menggunakan lebar yang disetel karena desain responsif?
SearchForKnowledge

5
Perhatikan bahwa max-width juga berfungsi. Ini membantu saya karena saya memiliki ikon yang harus memeluk ujung teks terlepas dari lebar bentangnya. (Kalau tidak, ikon akan mengambang ke kanan jika teks tidak mengambil lebar penuh rentang)
Kevin

2
Catatan: white-space: nowrapsebenarnya tidak perlu. Kita masih bisa melihat elips bahkan tanpa elips. Untuk beberapa baris text-overflow, lihat SO
gfaceless

24
Tidak yakin apakah ini adalah perubahan terbaru atau tidak, tetapi di Chrome 50 (beta) Anda tidak harus menetapkan lebar ke nilai px - "100%" juga berfungsi. white-space: nowrapdiperlukan.
thdoan

13
Anda tidak perlu mengatur perbaikan widthsama sekali. Yang perlu Anda lakukan adalah mengatur white-space: nowrap;dan berfungsi dengan baik.
adamj

37

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


17

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.


2
Solusi hebat - ini juga satu-satunya yang diposting di sini yang berfungsi untuk position: stickyelemen dalam display: flexwadah.
James Dinsdale

2
Saya pikir itu harus dimasukkan dalam jawaban yang dipilih. Itu memecahkan masalah saya. Terima kasih!
j0nd0n7

1
Anda, tuan, adalah seorang jenius.
Nathan Osman

1
Terima kasih kawan, selamat hari ini
Payung

7

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


5

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


5

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



1

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>


1

HARUS berisi

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

HARUS TIDAK mengandung

display: inline

HARUS berisi

position: sticky


0

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>


0

Ini adalah kode yang memungkinkan:

overflow: hidden;
text-overflow: ellipsis;

overflow: diperlukan disembunyikan


0

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

0

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.


-1

Tulis ini dalam aturan css Anda.

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

Anda juga dapat melihat ini, jsfiddle.net/ManiAnand/5v6pfy9w
Mani Abi Anand

Jika lebar dapat ditentukan tidak membuat jawaban saya salah. Yang Anda baru saja menambahkan blok tampilan dalam jawaban saya, saya telah menulis cuplikan, bukan seluruh kode, sehingga hal-hal lain dapat ditambahkan tetapi tidak ada hubungannya dengan masalah !! Bisakah Anda menentukan bagaimana jawaban saya tidak benar?
Siraj Alam

1
Lebar harus ditentukan serta tampilan. Jika lebar persentase atau tidak ditentukan dan tidak ditetapkan ke unit keras, meluap tidak akan dibatasi dan tidak akan berhasil. Lihat jawaban yang diterima.
jlesse

Lebar telah diatur oleh op. Saya memberi potongan untuk menambahkan kode-kodenya
Siraj Alam
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.