text-overflow: Firefox 4'te üç nokta? (ve FF5)

text-overflow:ellipsis;CSS özelliği, Microsoft web için hakkını yaptığını birkaç şeyden biri olmalıdır.

Diğer tüm tarayıcılar artık bunu destekliyor ... Firefox hariç.

Firefox geliştiricileri 2005'ten beri bunun üzerinde tartışıyorlar, ancak bunun için bariz talebe rağmen, kendilerini gerçekten uygulamaya koyamıyorlar (deneysel bir -moz-uygulama bile yeterli olacaktır).

Birkaç yıl önce, birisi üç noktayı desteklemesi için Firefox 3'ü hacklemenin bir yolunu buldu . Hack,-moz-binding özelliği XUL kullanarak uygulamak için kullanır. Oldukça fazla sayıda site artık bu saldırıyı kullanıyor.

Kötü haber? Firefox 4 edilir çıkarmadan -moz-bindingözelliği bu hack artık çalışmaz anlamına gelir.

Dolayısıyla, Firefox 4 yayınlanır yayınlanmaz (bu ayın sonlarına doğru duyuyorum), bu özelliği destekleyememesi sorununa geri döneceğiz.

Yani sorum şu: Bunun başka bir yolu var mı? (Mümkünse bir Javascript çözümüne geri dönmekten kaçınmaya çalışıyorum)

[DÜZENLE]
Pek çok ek oy var, bu yüzden bilmek isteyen tek kişi ben değilim, ancak şu ana kadar temelde 'javascript kullan' yazan bir cevabım var. Hala JS'ye hiç ihtiyaç duymayacak ya da en kötü ihtimalle CSS özelliğinin çalışmadığı durumlarda geri dönüş olarak kullanacak bir çözüm bulmayı umuyorum. Bu yüzden, birinin bir yerlerde bir cevap bulması ihtimaline karşın, soruya bir ödül göndereceğim.

[DÜZENLE]
Güncelleme: Firefox hızlı geliştirme moduna geçti, ancak şu anda yayınlanan FF5 olmasına rağmen bu özellik hala desteklenmiyor. Ve şimdi kullanıcıların çoğu FF3.6'dan yükseltme yaptığına göre, hack artık bir çözüm değil. İyi haber olabileceği söylendi yeni yayın planına sadece birkaç ay içinde kullanıma olmalıdır Firefox 6, eklenecektir. Eğer durum buysa, sanırım bekleyebilirim, ama daha önce çözemeyecekleri utanç verici.

[SON DÜZENLEME]
Üç nokta özelliğinin nihayet Firefox'un "Aurora Kanalı" na (yani geliştirme sürümü) eklendiğini görüyorum. Bu, 2011'in sonlarına doğru çıkması planlanan Firefox 7'nin bir parçası olarak piyasaya sürülmesi gerektiği anlamına geliyor. Ne rahatlatıcı.

Burada bulunan sürüm notları: https://developer.mozilla.org/en-US/Firefox/Releases/7

Spudley, jQuery kullanarak küçük bir JavaScript yazarak da aynı şeyi başarabilirsin:

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

Tüm tarayıcıların bunu yerel olarak (JavaScript olmadan) desteklemesinin bir yolu olması gerektiğini anlıyorum, ancak bu noktada sahip olduğumuz şey bu.

DÜZENLE Ayrıca, csstüm bu sabit genişlikli alana bir sınıf ekleyerek fixWidth aşağıdaki gibi bir şey yaparak daha düzgün hale getirebilirsiniz :

$(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

30/09/2011 DÜZENLEME

FF7 çıktı, bu hata çözüldü ve çalışıyor!

08/29/2011 DÜZENLEME

Bu sorun çözüldü olarak işaretlendi ve FF 7'de kullanıma sunulacak; şu anda 27.09.2011 tarihinde yayınlanacak şekilde ayarlanmıştır.

Takvimlerinizi işaretleyin ve yerine koyduğunuz tüm korsanları kaldırmaya hazırlanın.

ESKİ

Başka bir cevabım var: bekle .

FF geliştirme ekibi, bu sorunu çözmek için can atıyor.

Firefox 6 için geçici düzeltme setine sahipler.

Firefox 6 !! Bu ne zaman çıkacak?!?

Orada dur, hayali, aşırı tepkili insan. Firefox hızlı geliştirme yolunda. FF6, Firefox 5'ten altı hafta sonra piyasaya sürülecek. Firefox 5, 21 Haziran 2011'de piyasaya sürülecek.

Bu da düzeltmeyi Ağustos 2011'in başına koyar ... umarım.

Orijinal göndericinin sorusundaki bağlantıdan gelen hatayı takiben posta listesine kaydolabilirsiniz.

Veya buraya tıklayabilirsiniz ; hangisi en kolaysa.

Uygulamamdaki tarayıcıya özgü tek hackin FF4'ü destekleyeceği konusunda biraz hayal kırıklığına uğradığımı söylemeliyim. Yukarıdaki javascript çözümü, değişken genişlikli yazı tiplerini hesaba katmaz. İşte bunu açıklayan daha ayrıntılı bir komut dosyası. Bu çözümle ilgili en büyük sorun, kod çalıştırıldığında metni içeren öğe gizliyse, kutunun genişliğinin bilinmemesidir. Bu benim için bir anlaşma kırıcıydı, bu yüzden üzerinde çalışmayı / test etmeyi bıraktım ... ama birinin kullanması durumunda buraya göndereceğimi düşündüm. Testlerim kapsamlı olmadığından, iyi test ettiğinizden emin olun. Yalnızca FF4 kodunu çalıştırmak ve diğer tüm tarayıcıların mevcut çözümlerini kullanmasına izin vermek için bir tarayıcı denetimi eklemeyi amaçladım.

Bu, burada kurcalamak için mevcut olmalıdır: 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 (jQuery kullanır)

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

Şöyle adlandırılır:

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

Geçen hafta bu gremlinle de karşılaştım.

Kabul edilen çözüm, değişken genişlikli yazı tiplerini hesaba katmadığından ve wwwhack'in çözümünde bir While Loop bulunduğundan, $ .02'mi vereceğim.

Çapraz çarpmayı kullanarak problemimin işlem süresini büyük ölçüde azaltabildim. Temelde şuna benzeyen bir formülümüz var:

Bu durumda x değişkeni çözmemiz gereken şeydir. Tamsayı olarak döndürüldüğünde, taşan metnin olması gereken yeni uzunluğu verir. Elipslere gösterilecek yeterli alan sağlamak için MaxLength'u% 80 ile çarptım.

İşte tam bir html örneği:

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

Bunun yalnızca bir JS düzeltmesi olduğunu anlıyorum, ancak Mozilla bu hatayı düzeltene kadar, bir CSS çözümü bulacak kadar akıllı değilim.

Bu örnek benim için en iyi sonucu veriyor çünkü uygulamamızda bir grid her yüklendiğinde JS çağrılıyor. Her ızgaranın sütun genişliği değişir ve Firefox kullanıcılarımızın uygulamamızı ne tür bir bilgisayar görüntüleyeceği konusunda hiçbir kontrolümüz yoktur (ki tabii ki bu kontrole sahip olmamalıyız :)).

Bu saf CSS çözümü , her satırdan sonra üç nokta görünmesine neden olması dışında gerçekten yakındır.