text-overflow: elipsis di Firefox 4? (dan FF5)


104

The text-overflow:ellipsis;properti CSS harus menjadi salah satu dari beberapa hal bahwa Microsoft telah dilakukan dengan benar untuk web.

Semua browser lain sekarang mendukungnya ... kecuali Firefox.

Pengembang Firefox telah memperdebatkannya sejak tahun 2005 tetapi meskipun ada permintaan yang jelas untuk itu, mereka tampaknya tidak dapat benar-benar menerapkannya (bahkan -moz-implementasi eksperimental akan cukup).

Beberapa tahun yang lalu, seseorang menemukan cara untuk meretas Firefox 3 agar mendukung elipsis . Peretasan menggunakan -moz-bindingfitur untuk menerapkannya menggunakan XUL. Cukup banyak situs yang sekarang menggunakan peretasan ini.

Kabar buruknya? Firefox 4 menghapus -moz-bindingfitur tersebut , yang berarti peretasan ini tidak akan berfungsi lagi.

Jadi segera setelah Firefox 4 dirilis (saya dengar akhir bulan ini), kita akan kembali ke masalah karena tidak dapat mendukung fitur ini.

Jadi pertanyaan saya adalah: Apakah ada cara lain untuk menyiasatinya? (Saya mencoba untuk menghindari jatuh kembali ke solusi Javascript jika memungkinkan)

[EDIT]
Banyak suara positif, jadi saya jelas bukan satu-satunya yang ingin tahu, tapi sejauh ini saya punya satu jawaban yang pada dasarnya mengatakan 'gunakan javascript'. Saya masih mengharapkan solusi yang tidak membutuhkan JS sama sekali, atau paling buruk hanya menggunakannya sebagai cadangan di mana fitur CSS tidak berfungsi. Jadi saya akan memposting hadiah untuk pertanyaan itu, jika seseorang, di suatu tempat telah menemukan jawabannya.

[EDIT]
Pembaruan: Firefox telah memasuki mode pengembangan cepat, tetapi meskipun FF5 sekarang dirilis, fitur ini masih belum didukung. Dan sekarang sebagian besar pengguna telah meningkatkan dari FF3.6, peretasan bukan lagi solusi. Kabar baiknya, saya diberitahu bahwa itu mungkin ditambahkan ke Firefox 6, yang dengan jadwal rilis baru akan keluar hanya dalam beberapa bulan. Jika itu masalahnya, maka saya kira saya bisa menunggu, tapi sayang sekali mereka tidak bisa menyelesaikannya lebih awal.

[EDIT AKHIR]
Saya melihat bahwa fitur elipsis akhirnya ditambahkan ke "Aurora Channel" Firefox (yaitu versi pengembangan). Ini berarti bahwa sekarang harus dirilis sebagai bagian dari Firefox 7, yang akan dirilis menjelang akhir 2011. Sungguh melegakan.

Catatan rilis tersedia di sini: https://developer.mozilla.org/en-US/Firefox/Releases/7


19
fwiw, hal luar biasa lainnya yang dilakukan Microsoft untuk web: AJAX, innerHTML, menyalin JavaScript dengan cukup tepat sehingga sebenarnya menggunakan bahasa yang sama di browser yang berbeda, meskipun API tidak persis sama, IE6
sdleihssirhc

8
@sdleihssirhc: IE5.5 -> IE6 transisi memang sebuah revolusi. Anda adalah salah satu dari sedikit orang yang saya lihat yang secara publik mengakui itu;).
mingos

3
@mingos Ya, saya cukup berpikiran terbuka dan profetik serta tajam dan cerdas seperti itu.
sdleihssirhc

6
@mingos & @sdleihssirhc: Poin bagus, dan saya setuju - IE6 bagus pada masanya. Masalah saya dengan IE6 bukanlah seberapa bagusnya saat itu, tetapi bagaimana hal itu menyebabkan 10 tahun stagnasi di web. Tapi ini bukan tempat untuk berdebat tentang baik atau buruknya IE. :-) Ada banyak tempat lain untuk dikunjungi. Sementara itu, saya masih frustrasi dengan pengembang Firefox karena keras kepala terhadap elipsis.
Spudley

4
Sayangnya untuk saat ini belum ada solusi CSS. Solusi fallback yang saya gunakan, modernizr tidak memiliki pengujian untuk properti ini juga. Anda dapat memeriksa apakah UserAgent adalah Firefox dan memuat javascript alih-alih CSS
nunopolonia

Jawaban:


27

Spudley, Anda dapat mencapai hal yang sama dengan menulis JavaScript kecil menggunakan jQuery:

var limit = 50;
var ellipsis = "...";
if( $('#limitedWidthTextBox').val().length > limit) {
   // -4 to include the ellipsis size and also since it is an index
   var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4); 
   trimmedText += ellipsis;
   $('#limitedWidthTextBox').val(trimmedText);
}

Saya memahami bahwa seharusnya ada beberapa cara agar semua browser mendukung ini secara native (tanpa JavaScript), tetapi itulah yang kami miliki saat ini.

EDIT Juga, Anda bisa membuatnya lebih rapi dengan melampirkan csskelas ke semua bidang lebar tetap katakan fixWidth dan kemudian lakukan sesuatu seperti berikut:

$(document).ready(function() {
   $('.fixWidth').each(function() {
      var limit = 50;
      var ellipsis = "...";
      var text = $(this).val();
      if (text.length > limit) {
         // -4 to include the ellipsis size and also since it is an index
         var trimmedText = text.substring(0, limit - 4); 
         trimmedText += ellipsis;
         $(this).val(trimmedText);
      }
   });
});//EOF

2
Saya telah memberi Anda +1, tetapi saya ragu-ragu untuk menerima solusi Javascript kecuali jika tidak ada kemungkinan lain. Saya akan menunggu sedikit lebih lama untuk melihat apakah saya mendapatkan jawaban lain. Jika JS adalah satu-satunya pilihan, maka akan lebih baik untuk memiliki satu yang berfungsi dengan baik text-overflow:ellipsis;sehingga saya masih dapat menggunakan opsi CSS di browser lain.
Spudley

Dengan tidak adanya solusi kerja lainnya, saya harus dengan enggan menerima yang ini. Saya akan memodifikasinya agar hanya berjalan di Firefox, jadi saya bisa menggunakan fitur CSS di browser lain. Semoga orang-orang Mozilla dapat menerapkan elipsis untuk FF5. Terima kasih untuk bantuannya.
Spudley

Tidak length()seharusnya length? Itu adalah properti.
alex

Sulit untuk memilih panjang karakter yang berfungsi sepanjang waktu, terutama jika Anda menggunakan font dengan lebar bervariasi atau telah menambah atau mengurangi ukuran teks di browser.
spb

21

EDIT 30/09/2011

FF7 keluar, bug ini teratasi dan berhasil!


EDIT 29/08/2011

Masalah ini ditandai sebagai terselesaikan dan akan tersedia di FF 7; saat ini akan dirilis pada 09/27/2011.

Tandai kalender Anda dan bersiaplah untuk menghapus semua peretasan yang telah Anda lakukan.

TUA

Saya punya jawaban lain: tunggu .

Tim pengembang FF sedang berupaya keras untuk mengatasi masalah ini.

Mereka memiliki set perbaikan tentatif untuk Firefox 6.

Firefox 6 !! Kapan itu akan keluar?!?

Tenang, imajiner, orang yang terlalu reaktif. Firefox ada di jalur pengembangan cepat. FF6 ditetapkan untuk rilis enam minggu setelah Firefox 5. Firefox 5 ditetapkan untuk rilis 21 Juni 2011.

Sehingga menempatkan perbaikan pada awal Agustus 2011 ... semoga.

Anda dapat mendaftar ke milis mengikuti bug dari tautan di pertanyaan pengirim asli.

Atau Anda bisa klik di sini ; mana yang paling mudah.


Hacks.mozilla.org/2011/07/aurora7 ini menyiratkan bahwa itu akan ada di Firefox 7, bukan 6. Tapi poin utama Anda ( tunggu ) valid.
MatrixFrog

"Tunggu" tampaknya menjadi satu-satunya jawaban yang realistis, tetapi ini adalah jawaban yang sulit untuk diambil ketika bos Anda menuntutnya. :( Untungnya penantian itu tampaknya akan segera berakhir (meskipun masalahnya akan tetap ada selama ada orang yang menggunakan versi lama firefox)
Spudley

5
Tidak, ini dijadwalkan untuk Firefox 7 : developer.mozilla.org/en/CSS/…
Christian

6

Saya harus mengatakan bahwa saya sedikit kecewa karena satu-satunya peretasan khusus peramban di aplikasi saya adalah yang mendukung FF4. Solusi javascript di atas tidak memperhitungkan font lebar variabel. Berikut adalah skrip yang lebih panjang yang menjelaskan hal ini. Masalah besar dengan solusi ini adalah jika elemen yang berisi teks disembunyikan saat kode dijalankan maka lebar kotak tidak diketahui. Ini adalah pemecah kesepakatan bagi saya jadi saya berhenti mengerjakan / mengujinya ... tetapi saya pikir saya akan mempostingnya di sini jika itu berguna bagi seseorang. Pastikan untuk mengujinya dengan baik karena pengujian saya kurang dari lengkap. Saya bermaksud menambahkan pemeriksaan browser untuk hanya menjalankan kode untuk FF4 dan membiarkan semua browser lain menggunakan solusi yang ada.

Ini harus tersedia untuk mengutak-atik di sini: http://jsfiddle.net/kn9Qg/130/

HTML:

<div id="test">hello World</div>

CSS:

#test {
    margin-top: 20px;
    width: 68px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid green;
}

Javascript (menggunakan jQuery)

function ellipsify($c){
    // <div $c>                 content container (passed)
    //    <div $b>              bounds
    //       <div $o>           outer
    //          <span $i>       inner
    //       </div>
    //       <span $d></span>   dots
    //    </div>
    // </div>

    var $i = $('<span>' + $c.html() + '</span>');
    var $d = $('<span>...</span>');
    var $o = $('<div></div>');
    var $b = $('<div></div>');

    $b.css( {
        'white-space' : "nowrap",
        'display' : "block",
        'overflow': "hidden"
    }).attr('title', $c.html());

    $o.css({
        'overflow' : "hidden",
        'width' : "100%",
        'float' : "left"
    });

    $c.html('').append($b.append( $o.append($i)).append($d));

    function getWidth($w){
        return parseInt( $w.css('width').replace('px', '') );
    }

    if (getWidth($o) < getWidth($i))
    {
        while (getWidth($i) > (getWidth($b) - getWidth($d)) )
        {
             var content = $i.html();
             $i.html(content.substr(0, content.length - 1));
        }

        $o.css('width', (getWidth($b) - getWidth($d)) + 'px');
    }
    else
    {
        var content = $i.html();
        $c.empty().html(content);
    }
}

Ini akan disebut seperti:

$(function(){
    ellipsify($('#test'));
});

6

Saya telah mengalami gremlin ini selama seminggu terakhir juga.

Karena solusi yang diterima tidak memperhitungkan font lebar variabel dan solusi wwwhack memiliki While Loop, saya akan memasukkan $ 0,02 saya.

Saya dapat secara drastis mengurangi waktu pemrosesan masalah saya dengan menggunakan perkalian silang. Pada dasarnya, kami memiliki rumus yang terlihat seperti ini:

masukkan deskripsi gambar di sini

Variabel x dalam hal ini adalah apa yang perlu kita selesaikan. Ketika dikembalikan sebagai Integer, ini akan memberikan panjang baru yang seharusnya menjadi teks yang melebihi batas. Saya mengalikan MaxLength dengan 80% untuk memberi elips cukup ruang untuk ditampilkan.

Berikut adalah contoh html lengkap:

<html>
    <head>
        <!-- CSS setting the width of the DIV elements for the table columns.  Assume that these widths could change.  -->
        <style type="text/css">
            .div1 { overflow: hidden; white-space: nowrap; width: 80px; }
            .div2 { overflow: hidden; white-space: nowrap; width: 150px; }
            .div3 { overflow: hidden; white-space: nowrap; width: 70px; }
        </style>
        <!-- Make a call to Google jQuery to run the javascript below.  
             NOTE:  jQuery is NOT necessary for the ellipses javascript to work; including jQuery to make this example work -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {  
                //Loop through each DIV element
                $('div').each(function(index) {
                    var myDiv = this;  //The original Div element which will have a nodeType of 1 (e.g. ELEMENT_NODE)
                    var divText = myDiv; //Variable used to obtain the text from the DIV element above  

                    //Get the nodeType of 3 (e.g. TEXT_NODE) from the DIV element.  For this example, it will always be the firstChild  
                    divText = divText.firstChild;  

                    //Create another variable to hold the display text  
                    var sDisplayText = divText.nodeValue;  

                    //Determine if the DIV element is longer than it's supposed to be.
                    if (myDiv.scrollWidth > myDiv.offsetWidth) {  
                        //Percentage Factor is just a way of determining how much text should be removed to append the ellipses  
                        //With variable width fonts, there's no magic number, but 80%, should give you enough room
                        var percentageFactor = .8;  

                        //This is where the magic happens.
                        var sliceFactor = ((myDiv.offsetWidth * percentageFactor) * sDisplayText.length) / myDiv.scrollWidth;
                        sliceFactor = parseInt(sliceFactor);  //Get the value as an Integer
                        sDisplayText = sDisplayText.slice(0, sliceFactor) + "..."; //Append the ellipses
                        divText.nodeValue = sDisplayText; //Set the nodeValue of the Display Text
                    }
                });
            });
        </script>
    </head>
    <body>
        <table border="0">
            <tr>    
                <td><div class="div1">Short Value</div></td>    
                <td><div class="div2">The quick brown fox jumps over the lazy dog; lots and lots of times</div></td>    
                <td><div class="div3">Prince</div></td> 
            </tr>
            <tr>    
                <td><div class="div1">Longer Value</div></td>   
                <td><div class="div2">For score and seven year ago</div></td>   
                <td><div class="div3">Brown, James</div></td>   
            </tr>
            <tr>    
                <td><div class="div1">Even Long Td and Div Value</div></td> 
                <td><div class="div2">Once upon a time</div></td>   
                <td><div class="div3">Schwarzenegger, Arnold</div></td> 
            </tr>
        </table>
    </body>
</html>

Saya mengerti bahwa ini adalah perbaikan hanya JS, tetapi sampai Mozilla memperbaiki bug, saya tidak cukup pintar untuk menghasilkan solusi CSS.

Contoh ini bekerja paling baik untuk saya karena JS dipanggil setiap kali grid dimuat di aplikasi kita. Lebar kolom untuk setiap kisi bervariasi dan kami tidak memiliki kendali atas jenis komputer apa yang dilihat oleh pengguna Firefox kami (yang, tentu saja, kami tidak boleh memiliki kendali itu :)).


Terima kasih atas jawabannya; Saya akan mencobanya, dan saya yakin ini akan berguna bagi orang lain yang ingin menyelesaikan masalah yang sama. +1
Spudley

Hmm, Anda tampaknya salah mengonfigurasi editor teks ;-P - Anda tampaknya menggunakan tab dengan lebar kurang dari 8 karakter!
SamB

3

Solusi CSS murni ini sangat dekat, kecuali fakta bahwa hal itu menyebabkan elipsis muncul setelah setiap baris.


Terima kasih atas jawabannya. Sebanyak saya ingin menerima solusi CSS murni, yang satu ini tidak benar-benar bisa diterapkan untuk saya, karena memerlukan markup ekstra dan, seperti yang Anda katakan, itu meninggalkan elipsis yang muncul saat Anda tidak menginginkannya. terimakasih Meskipun. Namun, saya memberi Anda +1.
Spudley
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.