Firefox 4의 text-overflow : ellipsis? (및 FF5)

text-overflow:ellipsis;CSS 속성은 마이크로 소프트가 웹에 적합한 일을했다는 몇 가지 중 하나 여야합니다.

이제 Firefox를 제외한 다른 모든 브라우저에서 지원합니다.

파이어 폭스 개발자들은 2005 년부터이 문제에 대해 논쟁을 벌여 왔지만 분명한 요구에도 불구하고 실제로 구현할 수는없는 것 같습니다 (실험적인 -moz-구현으로도 충분할 것입니다).

몇 년 전 누군가가 Firefox 3를 해킹하여 생략 부호를 지원하도록 만드는 방법을 알아 냈습니다 . 해킹은이 -moz-binding기능을 사용하여 XUL을 사용하여 구현합니다. 현재 상당수의 사이트에서이 해킹을 사용하고 있습니다.

나쁜 소식? Firefox 4는 이 -moz-binding기능을 제거하고 있으며 , 이는이 해킹이 더 이상 작동하지 않음을 의미합니다.

따라서 Firefox 4가 출시 되 자마자 (이번 달 말에)이 기능을 지원하지 못하는 문제로 돌아갈 것입니다.

그래서 내 질문은 : 이것에 대해 다른 방법이 있습니까? (가능한 한 Javascript 솔루션으로 돌아 가지 않으려 고 노력하고 있습니다)

[편집]
많은 찬성 투표, 그래서 내가 알고 싶어하는 유일한 사람은 아니지만 기본적으로 '자바 스크립트 사용'이라는 답이 하나 있습니다. 나는 여전히 JS가 전혀 필요하지 않거나 최악의 경우 CSS 기능이 작동하지 않는 대체 수단으로 만 사용하는 솔루션을 기대하고 있습니다. 그래서 저는 질문에 대한 현상금을 게시 할 것입니다. 누군가 어딘가에서 답을 찾았을 가능성이 있습니다.

[편집]
업데이트 : Firefox는 빠른 개발 모드로 들어 갔지만 FF5가 출시되었지만이 기능은 여전히 ​​지원되지 않습니다. 그리고 이제 대다수의 사용자가 FF3.6에서 업그레이드 했으므로 해킹은 더 이상 해결책이 아닙니다. 좋은 소식 은 파이어 폭스 6에 추가 될 수 있다는 말을 들었 습니다. 파이어 폭스 6은 새로운 릴리스 일정이 몇 달 안에 나올 것입니다. 그렇다면 기다릴 수있을 것 같지만 더 빨리 분류 할 수 없었던 것이 아쉽습니다.

[최종 편집]
줄임표 기능이 Firefox의 "Aurora Channel"(예 : 개발 버전)에 마침내 추가 된 것을 확인했습니다. 이것은 2011 년 말에 나올 파이어 폭스 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);
}

모든 브라우저가 기본적으로 (자바 스크립트없이)이를 지원하는 방법이 있어야한다는 것을 이해합니다. 그러나 이것이 현재 우리가 가지고있는 것입니다.

편집 또한 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

2011 년 9 월 30 일 수정

FF7이 나왔고이 버그 가 해결되었으며 작동합니다!

2011 년 8 월 29 일 수정

이 문제는 해결 된 것으로 표시되며 FF 7에서 사용할 수 있습니다. 현재 2011 년 9 월 27 일에 출시 될 예정입니다.

달력을 표시하고 배치 한 모든 해킹을 제거 할 준비를하십시오.

낡은

내가 다른 대답을 : 대기 .

FF 개발팀은이 문제를 해결하기 위해 뜨거운 노력을 기울이고 있습니다.

Firefox 6에 대한 임시 수정 세트가 있습니다.

Firefox 6 !! 언제 나올까요?!?

상상의 과민 반응을 보이는 사람. Firefox는 빠른 개발 과정에 있습니다. FF6은 Firefox 5 이후 6 주에 출시 될 예정입니다. Firefox 5는 2011 년 6 월 21 일 출시 될 예정입니다.

2011 년 8 월 초에 수정이 이루어지기를 바랍니다.

원래 포스터의 질문에있는 링크의 버그를 따라 메일 링리스트에 가입 할 수 있습니다.

또는 여기 를 클릭하십시오 . 어느 쪽이든 가장 쉬운 것입니다.

내 응용 프로그램에서 유일한 브라우저 특정 해킹이 FF4를 지원하는 것이 조금 실망 스럽다고 말해야합니다. 위의 자바 스크립트 솔루션은 가변 너비 글꼴을 고려하지 않습니다. 이를 설명하는 더 자세한 스크립트가 있습니다. 이 솔루션의 가장 큰 문제는 코드가 실행될 때 텍스트가 포함 된 요소가 숨겨지면 상자의 너비를 알 수 없다는 것입니다. 이것은 나에게 거래 차단기 였기 때문에 작업 / 테스트를 중단했지만 누군가에게 유용 할 경우 여기에 게시 할 것이라고 생각했습니다. 내 테스트가 철저하지 않았으므로 잘 테스트하십시오. 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;
}

자바 스크립트 (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'));
});

나는 지난주 에도이 그렘린을 만났다 .

허용되는 솔루션은 가변 너비 글꼴을 고려하지 않고 wwwhack의 솔루션에는 While 루프가 있으므로 $ .02를 넣겠습니다.

교차 곱셈을 사용하여 문제 처리 시간을 대폭 줄일 수있었습니다. 기본적으로 다음과 같은 공식이 있습니다.

이 경우 변수 x 는 우리가 풀어야 할 것입니다. Integer로 반환되면 넘쳐나는 텍스트가 있어야하는 새로운 길이를 제공합니다. 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 솔루션 은 모든 줄 뒤에 줄임표가 표시된다는 사실을 제외하면 정말 가깝습니다.