text-overflow:многоточие в Firefox 4? (и FF5)

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

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

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

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

плохие новости? Firefox 4 - это удаление -moz-binding характеристика, что означает, что этот хак не работает.

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

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

[EDIT]
Много голосов, поэтому я, очевидно, не единственный, кто хочет знать, но у меня есть один ответ, который в основном говорит, 'использовать JavaScript'. Я все еще надеюсь на решение, которое либо вообще не будет нуждаться в JS, либо, в худшем случае, будет использовать его только как запасной вариант, где функция CSS не работает. Поэтому я собираюсь опубликовать щедрость на вопрос, на случай, если кто-то, где-то нашел ответ.

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

[FINAL EDIT]
Я вижу, что функция многоточия наконец-то была добавлена в Firefox "Aurora Channel" (версия разработки ie). Это означает, что теперь он должен быть выпущен как часть Firefox 7, который должен выйти в конце 2011 года. Какое облегчение.

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

5 104
css css3 firefox ellipsis

5 ответов:

приятель, вы могли бы достичь того же с помощью написания небольшого кода 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 += elipsis;
   $('#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 += elipsis;
         $(this).val(trimmedText);
      }
   }
}
27

EDIT 09/30/2011

которых FF7 вышла, эта ошибка разрешен и работает!

редактировать 29.08.2011

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

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

старый

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

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

у них есть предварительный набор исправлений для Firefox 6.

Firefox 6!! Когда это произойдет вышел?!?

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

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

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

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

21

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

я столкнулся с этим гремлин за последнюю неделю, а также.

поскольку принятое решение не учитывает шрифты переменной ширины, а решение wwwhack имеет цикл While, я добавлю свой $.02.

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

enter image description here

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

6

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

3