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

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

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

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.

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

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:

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 :)).

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