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

Question

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

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

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

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

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

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

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

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

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

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

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

Answer 1

Spudley, вы можете достичь того же, написав небольшой 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), но это то, что мы имеем на данный момент.

EDIT Кроме того, вы можете сделать его более аккуратным, добавив класс 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

Answer 2

РЕДАКТИРОВАТЬ 09/30/2011

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

---

РЕДАКТИРОВАНИЕ 08/29/2011

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

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

СТАРЫЙ

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

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

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

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

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

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

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

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

Answer 3

Я столкнулся с этим Гремлином за последнюю неделю.

Поскольку в принятом решении не учитываются шрифты переменной ширины, а в решении 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 просматривают в нашем приложении (которое, конечно, у нас не должно иметь такой контроль :)).

Answer 4

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

Answer 5

Это чистое решение CSS действительно близко, за исключением того факта, что оно вызывает многоточие после каждой строки.