переповнення тексту: еліпсис у Firefox 4? (і FF5)

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, який з новим графіком випуску повинен вийти лише через кілька місяців. Якщо це так, то, мабуть, я можу його зачекати, але шкода, що вони не змогли його відібрати раніше.

[ЗАКЛЮЧНА РОБОТА]
Я бачу, що функцію еліпсису нарешті було додано до "Aurora Channel" Firefox (тобто версії розробки). Це означає, що тепер його слід випустити у складі 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), але ось що ми маємо на даний момент.

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

РЕДАКЦІЯ 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 має цикл «Хоча», я вкину свої $ 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 дійсно близьке, за винятком того, що воно викликає появу еліпсису після кожного рядка.