Memotong string panjang dengan CSS: layak belum?

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?

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 .

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:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

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 /

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

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