Memotong string panjang dengan CSS: layak belum?


210

Apakah ada cara yang baik untuk memotong teks dengan HTML dan CSS biasa, sehingga konten dinamis dapat masuk dalam tata letak lebar dan tinggi tetap?

Saya telah memotong sisi server dengan lebar logis (yaitu sejumlah karakter yang dapat ditebak secara membabi buta), tetapi karena 'w' lebih lebar daripada 'i' ini cenderung suboptimal, dan juga mengharuskan saya untuk menebak ulang ( dan terus mengutak-atik) jumlah karakter untuk setiap lebar tetap. Idealnya pemotongan akan terjadi di browser, yang mengetahui lebar fisik dari teks yang diberikan.

Saya telah menemukan bahwa IE memiliki text-overflow: ellipsisproperti yang melakukan persis apa yang saya inginkan, tetapi saya perlu ini menjadi cross-browser. Properti ini tampaknya (agak?) Standar tetapi tidak didukung oleh Firefox. Saya telah menemukan berbagai pemecahan masalah berdasarkan overflow: hidden, tetapi mereka juga tidak menampilkan elipsis (Saya ingin pengguna tahu kontennya terpotong), atau menampilkannya sepanjang waktu (bahkan jika kontennya tidak terpotong).

Apakah ada yang punya cara yang baik untuk menyesuaikan teks dinamis dalam tata letak yang tetap, atau apakah pemotongan sisi server dengan lebar logis sebagus yang akan saya dapatkan untuk saat ini?


2014: lihat jawaban terbaru stackoverflow.com/questions/802175/…
Adrien Be


Jawaban:


187

Pembaruan: text-overflow: ellipsissekarang didukung pada Firefox 7 (dirilis 27 September 2011). Yay! Jawaban asli saya mengikuti sebagai catatan sejarah.

Justin Maxwell memiliki solusi lintas browser CSS. Itu memang datang dengan kelemahan tetapi tidak memungkinkan teks dipilih di Firefox. Lihat posting tamu di blog Matt Snider untuk detail lengkap tentang cara kerjanya.

Perhatikan teknik ini juga mencegah pembaruan konten node dalam JavaScript menggunakan innerHTMLproperti di Firefox. Lihat akhir posting ini untuk solusinya.

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

ellipsis.xml isi file

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

Memperbarui konten simpul

Untuk memperbarui konten simpul dengan cara yang berfungsi di Firefox gunakan yang berikut ini:

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

Lihat posting Matt Snider untuk penjelasan tentang cara kerjanya .


Itu luar biasa, terima kasih telah menunjukkannya! Teks yang tidak dapat dipilih dan pembatasan konten apa saja yang dapat masuk dalam div yang terpotong adalah hal yang memalukan, tetapi secara umum itu terlihat seperti solusi yang baik.
Sam Stokes

Satu-satunya kekecewaan yang saya alami adalah bahwa spasi dirender sebagai & nbsp ;, jadi lekukan tidak benar-benar layak ... = /
Matchu

Saya juga mengalami masalah yang sama. Saya tidak percaya Firefox belum mendukung ini dalam beberapa bentuk.
mcjabberz

apakah pendekatan ini bekerja untuk siapa saja pada elemen OPSI kontrol SELECT di Webkit dan IE8. Webkit tampaknya tidak melakukan apa pun untuk saya dan IE8 hanya memotongnya tanpa elipsis.
Rajat

Dokumentasi Microsoft untuk text-overflowtidak menunjukkan dukungan untuk optionelemen (lihat bagian Berlaku Ke di msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx ).
Simon Lieschke

45

2014 Maret: Memotong string panjang dengan CSS: jawaban baru dengan fokus pada dukungan browser

Demo di http://jsbin.com/leyukama/1/ (saya menggunakan jsbin karena mendukung IE versi lama).

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

Properti CSS -ms-text-overflow tidak diperlukan: properti sinonim dari properti CSS text-overflow, tetapi versi IE dari 6 hingga 11 sudah mendukung properti CSS teks-overflow.

Berhasil diuji (di Browserstack.com) pada OS Windows, untuk browser web:

  • IE6 ke IE11
  • Opera 10.6, Opera 11.1, Opera 15.0, Opera 20.0
  • Chrome 14, Chrome 20, Chrome 25
  • Safari 4.0, Safari 5.0, Safari 5.1
  • Firefox 7.0, Firefox 15

Firefox: seperti yang ditunjukkan oleh Simon Lieschke (dalam jawaban lain), Firefox hanya mendukung properti CSS teks-overflow dari Firefox 7 dan seterusnya (dirilis 27 September 2011).

Saya memeriksa perilaku ini dua kali pada Firefox 3.0 & Firefox 6.0 (teks-overflow tidak didukung).

Beberapa pengujian lebih lanjut pada browser web Mac OS akan diperlukan.

Catatan: Anda mungkin ingin menampilkan tooltip di mouse ketika elipsis diterapkan, ini bisa dilakukan melalui javascript, lihat pertanyaan ini: Deteksi ellipsis HTML-overflow teks dan HTML - bagaimana saya bisa menunjukkan tooltip SAJA saja ketika elipsis diaktifkan

Sumber:


@chiragpatel coba sendiri dengan mengedit demo langsung ini jsbin.com/leyukama/1
Adrien Be

Bagi siapa pun yang tertarik, FF7 <adalah 0,05% pengguna Firefox saat ini
Tom Tom

19

Jika Anda setuju dengan solusi JavaScript, ada plug-in jQuery untuk melakukan ini dalam mode lintas-browser - lihat http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for -firefox-via-jquery /


Itu pasti bermanfaat, terima kasih! Sepertinya semua browser kecuali Firefox mendukung properti CSS, jadi dengan plugin ini, satu-satunya orang yang tidak bekerja adalah pengguna Firefox yang telah menonaktifkan Javascript - dan bagaimanapun juga itu adalah degradasi yang bagus. Adakah yang tahu seperti apa implikasi kinerja itu?
Sam Stokes

Tidak, maaf ... Saya belum pernah menggunakan kode itu dalam kehidupan nyata, hanya bermain dengan demo. Akan mudah untuk mengambil demo dan memotong dan menempelkannya ratusan kali ke halaman yang sama.
RichieHindle

2
JavaScript truncate () (baik itu dot-string untuk jQuery atau Prototype atau apa pun) hanyalah solusi setengah jalan, karena mereka tidak memperhitungkan lebar karakter. Jadi, jika Anda ingin memotong teks karena ruang terbatas yang ditentukan sebelumnya, fungsi-fungsi itu hanya bekerja dengan andal ketika menggunakan font monospace. Setiap solusi serius harus beroperasi pada mesin terbang, bukan pada jumlah karakter.
Matthias

@ Matthias: Mungkin kode telah diperbarui sejak Anda mengujinya, tapi saya baru saja melihat demo dan berfungsi dengan baik dengan font-lebar variabel.
RichieHindle

7

OK, Firefox 7 diimplementasikan text-overflow: ellipsisserta text-overflow: "string". Rilis final direncanakan untuk 2011-09-27.


6

Solusi lain untuk masalah ini adalah seperangkat aturan CSS berikut:

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

Satu-satunya kelemahan dengan CSS di atas adalah bahwa ia akan menambahkan "..." terlepas dari apakah teks-meluap wadah atau tidak. Namun, jika Anda memiliki kasus di mana Anda memiliki banyak elemen dan yakin bahwa konten akan meluap, yang ini akan menjadi seperangkat aturan yang lebih sederhana.

Dua sen saya. Tutup ke teknik asli oleh Justin Maxwell


Masalah dengan kode pseudo adalah "..." masih terpotong atau disembunyikan jika teks meluap. Saya berharap jika teks meluap, itu akan memastikan "..." ditampilkan. Jelas, bukan itu masalahnya :(
Antony

@Antony Cukup posisikan elemen semu: position: absolute; right: 0;(dan jangan lupa position: relativepada elemen nyata agar bisa berfungsi). Akan tumpang tindih dengan teks sehingga Anda mungkin ingin menambahkan warna latar belakang juga.
anak terakhir
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.