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

Ответ 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), но то, что мы имеем на данный момент.

РЕДАКТИРОВАТЬ Кроме того, вы можете сделать его более аккуратным, прикрепив класс 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

Ответ 2

EDIT 09/30/2011

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

EDIT 08/29/2011

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

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

OLD

У меня есть еще один ответ: wait.

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

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

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

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

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

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

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

Ответ 3

Я должен сказать, что я немного разочарован тем, что единственным браузером в моем приложении будет поддержка FF4. Вышеупомянутое решение javascript не учитывает шрифты переменной ширины. Ниже приведен более подробный script. Большая проблема с этим решением заключается в том, что если элемент, содержащий текст, скрыт при запуске кода, ширина поля не известна. Для меня это было нарушением сделки, поэтому я перестал работать над этим тестированием... но я думал, что отправлю его здесь, если он кому-то поможет. Не забудьте проверить его, так как мои тесты были менее исчерпывающими. Я намеревался добавить проверку браузера только для запуска кода для 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'));
});

Ответ 4

На прошлой неделе я столкнулся с этим gremlin.

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

Ответ 5

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