переполнение текста: многоточие в Firefox 4? (и FF5)

Свойство text-overflow:ellipsis;CSS должно быть одной из немногих вещей, которые Microsoft сделала правильно для Интернета.

Все остальные браузеры теперь поддерживают его ... кроме Firefox.

Разработчики Firefox спорят по этому поводу с 2005 года, но, несмотря на очевидную потребность в нем, они, похоже, не могут заставить себя реализовать его (даже экспериментальной -moz-реализации было бы достаточно).

Несколько лет назад кто-то разработал способ взломать Firefox 3, чтобы он поддерживал многоточие . Хак использует эту -moz-bindingфункцию для реализации с помощью XUL. Довольно много сайтов сейчас используют этот взлом.

Плохие новости? Firefox 4 удаляет эту -moz-bindingфункцию , а это означает, что этот взлом больше не будет работать.

Итак, как только будет выпущен Firefox 4 (я слышал, в конце этого месяца), мы вернемся к проблеме того, что он не может поддерживать эту функцию.

Итак, мой вопрос: есть ли другой способ обойти это? (Я стараюсь не возвращаться к решению Javascript, если это вообще возможно)

[РЕДАКТИРОВАТЬ]
Большое количество голосов, так что я, очевидно, не единственный, кто хочет знать, но у меня пока есть один ответ, который в основном гласит «используйте javascript». Я все еще надеюсь на решение, которое либо вообще не будет нуждаться в JS, либо, в худшем случае, будет использовать его только как запасной вариант, когда функция CSS не работает. Итак, я собираюсь объявить награду за вопрос, на случай, если кто-то где-то нашел ответ.

[EDIT]
Обновление: Firefox перешел в режим быстрой разработки, но, несмотря на то, что сейчас выпущен FF5, эта функция все еще не поддерживается. И теперь, когда большинство пользователей обновили FF3.6, взлом больше не является решением. Хорошая новость. Мне сказали, что он может быть добавлен в Firefox 6, который с новым графиком выпуска должен выйти всего через несколько месяцев. Если это так, то, думаю, я могу подождать, но жаль, что они не смогли разобраться с этим раньше.

[ОКОНЧАТЕЛЬНОЕ РЕДАКТИРОВАНИЕ]
Я вижу, что функция многоточия наконец-то была добавлена ​​в Firefox "Aurora Channel" (т.е. версия для разработки). Это означает, что теперь он должен быть выпущен как часть Firefox 7, который должен выйти в конце 2011 года. Какое облегчение.

Примечания к выпуску доступны здесь: https://developer.mozilla.org/en-US/Firefox/Releases/7

Спадли, вы могли бы добиться того же, написав небольшой JavaScript с помощью 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);
}

Я понимаю, что должен быть какой-то способ, чтобы все браузеры поддерживали это изначально (без 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

РЕДАКТИРОВАТЬ 30.09.2011

FF7 отсутствует, эта ошибка устранена и работает!

РЕДАКТИРОВАТЬ 29.08.2011

Эта проблема помечена как решенная и будет доступна в FF 7; в настоящее время планируется выпуск 27.09.2011.

Отметьте свои календари и будьте готовы удалить все те взломы, которые вы использовали.

Старый

У меня есть другой ответ: подождите .

Команда разработчиков FF по горячим следам пытается решить эту проблему.

У них есть предварительное исправление для Firefox 6.

Firefox 6 !! Когда это выйдет?!?

Спокойный, воображаемый, чрезмерно реактивный человек. Firefox находится на пути ускоренного развития. Выпуск FF6 планируется через шесть недель после Firefox 5. Выпуск Firefox 5 запланирован на 21 июня 2011 года.

Так что исправление произойдет где-то в начале августа 2011 ... надеюсь.

Вы можете подписаться на список рассылки, следуя сообщению об ошибке по ссылке в исходном вопросе автора.

Или вы можете щелкнуть здесь ; в зависимости от того, что будет проще всего.

Должен сказать, я немного разочарован тем, что единственный хакерский хакер в моем приложении будет поддерживать 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'));
});

Я тоже сталкивался с этим гремлином на прошлой неделе.

Поскольку принятое решение не учитывает шрифты переменной ширины, а решение wwwhack имеет цикл While Loop, я добавлю свои $ 0,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 действительно близко, за исключением того факта, что оно заставляет многоточие появляться после каждой строки.