Firefox 4のtext-overflow：ellipsis？（およびFF5）

text-overflow:ellipsis;CSSプロパティは、MicrosoftがWeb用の権利を行っていることをいくつかのいずれかでなければなりません。

Firefoxを除いて、他のすべてのブラウザでサポートされています。

Firefox開発者達は2005年以来それについて議論していますが、明らかな要求にもかかわらず、彼らは実際にそれを実装するようには思えません（実験的な-moz-実装でさえ十分です）。

数年前、誰かがFirefox 3をハックして省略記号をサポートする方法を考え出しました。ハックは、-moz-bindingXULを使用して機能を実装する機能を使用します。かなり多くのサイトがこのハックを使用しています。

悪いニュース？Firefox 4は機能を削除してい-moz-bindingます。つまり、このハックは機能しなくなります。

したがって、Firefox 4がリリースされるとすぐ（今月の後半と聞いています）、この機能をサポートできないという問題に戻ります。

だから私の質問は：これを回避する他の方法はありますか？（可能な場合は、JavaScriptソリューションにフォールバックしないようにしています）

[編集]
賛成投票がたくさんあるので、知りたいのは私だけではないことは明らかですが、これまでのところ、基本的に「JavaScriptを使用する」という1つの回答を得ています。私はまだJSをまったく必要としないか、最悪の場合、CSS機能が機能しないフォールバックとしてのみそれを使用するソリューションを望んでいます。ですから、質問の報奨金を投稿します。誰かがどこかで答えを見つけた可能性があります。

[編集]
更新：Firefoxが高速開発モードになりましたが、FF5がリリースされているにもかかわらず、この機能はまだサポートされていません。そして今、大多数のユーザーがFF3.6からアップグレードしたので、ハッキングはもはや解決策ではありません。良いニュースは、Firefox 6に追加される可能性があると言われています。Firefox6は新しいリリーススケジュールで数か月でリリースされる予定です。もしそうなら、私はそれを待つことができると思いますが、彼らがそれをもっと早く分類できなかったのは残念です。

[
最終編集] 省略記号機能がついにFirefoxの "Aurora Channel"（つまり開発版）に追加されたようです。これは、2011年末に予定されているFirefox 7の一部としてリリースされることを意味します。

ここで利用可能なリリースノート：https : //developer.mozilla.org/en-US/Firefox/Releases/7

Spudley、jQueryを使用して小さなJavaScriptを記述することで同じことを達成できます。

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

すべてのブラウザーがこれをネイティブに（JavaScriptを使用せずに）サポートする方法がいくつかあるはずだと理解していますが、現時点ではそれが可能です。

編集 また、cssこれらのすべての固定幅フィールドにクラスをアタッチしてfixWidth 、次のようなことを行うことで、よりきれいにすることができます。

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

編集09/30/2011

FF7がリリースされました。このバグは解決され、機能します！

編集08/29/2011

この問題は解決済みとしてマークされ、FF 7で利用可能になります。現在、2011年9月27日にリリースされる予定です。

カレンダーにマークを付けて、配置したハックをすべて削除する準備をします。

古い

私は別の答えを持っている： 待機を。

FF開発チームは、この問題を解決するために熱心に取り組んでいます。

彼らはFirefox 6の暫定的な修正セットを持っています。

Firefox 6 !! いつ出てくるの？！？

あっさりしていて、架空の、反応しすぎる人。Firefoxは高速開発トラックにあります。FF6は、Firefox 5の6週間後にリリースされる予定です。Firefox5は、2011年6月21日にリリースされる予定です。

したがって、2011年8月の初めに修正が行われる予定です。

元の投稿者の質問のリンクから、バグに続くメーリングリストにサインアップできます。

または、ここをクリックしてください。最も簡単な方。

私のアプリケーションでブラウザー固有のハックがFF4をサポートすることだけであることに少しがっかりしていると言わざるを得ません。上記のjavascriptソリューションは、可変幅フォントを考慮していません。これを説明するより詳細なスクリプトを次に示します。このソリューションの大きな問題は、コードの実行時にテキストを含む要素が非表示になっている場合、ボックスの幅がわからないことです。これは私にとって取引ブレーカーだったので、作業/テストを中止しました...しかし、誰かが使用する場合に備えて、ここに投稿すると思いました。私のテストは網羅的ではなかったので、よくテストしてください。私はFF4のコードのみを実行するブラウザーチェックを追加し、他のすべてのブラウザーが既存のソリューションを使用できるようにするつもりでした。

これはここをいじるのに利用できるはずです：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を使用）

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

それは次のように呼び出されます：

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

この1週間もこのグレムリンに遭遇しました。

受け入れられたソリューションは可変幅フォントを考慮しておらず、wwwhackのソリューションはWhileループを持っているので、$。02を投入します。

交差乗算を使用することで、問題の処理時間を大幅に削減できました。基本的に、次のような数式があります。

この場合の変数xは、解決する必要があるものです。整数として返されると、オーバーフローするテキストの新しい長さが得られます。MaxLengthに80％を掛けて、楕円に表示する十分なスペースを与えました。

以下は完全なhtmlの例です。

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

これはJSのみの修正であることを理解していますが、Mozillaがバグを修正するまで、CSSソリューションを思い付くほど賢くありません。

アプリケーションでグリッドがロードされるたびにJSが呼び出されるため、この例は私にとって最も効果的です。各グリッドの列幅は異なり、Firefoxユーザーがアプリを表示するコンピューターの種類を制御することはできません（もちろん、その制御を行うことはできません :)）。

この純粋なCSSソリューションは、すべての行の後に省略記号が表示されるという事実を除いて、非常に近いものです。