text-tràn: dấu chấm lửng trong Firefox 4? (và FF5)

Các text-overflow:ellipsis; thuộc tính CSS phải là một trong số ít những điều mà Microsoft đã thực hiện phù hợp với web.

Tất cả các trình duyệt khác hiện hỗ trợ nó ... ngoại trừ Firefox.

Các nhà phát triển Firefox đã tranh cãi về nó kể từ năm 2005 nhưng mặc dù có nhu cầu rõ ràng về nó, họ dường như không thể thực sự tự thực hiện nó (ngay cả -moz-việc triển khai thử nghiệm cũng là đủ).

Một vài năm trước, ai đó đã tìm ra cách hack Firefox 3 để làm cho nó hỗ trợ dấu chấm lửng . Bản hack sử dụng -moz-bindingtính năng để thực hiện nó bằng XUL. Khá nhiều trang web hiện đang sử dụng bản hack này.

Các tin xấu? Firefox 4 đang loại bỏ -moz-bindingtính năng này , có nghĩa là bản hack này sẽ không hoạt động nữa.

Vì vậy, ngay sau khi Firefox 4 được phát hành (tôi nghe nói vào cuối tháng này), chúng ta sẽ quay lại vấn đề là nó không thể hỗ trợ tính năng này.

Vì vậy, câu hỏi của tôi là: Có cách nào khác để giải quyết vấn đề này không? (Tôi đang cố gắng tránh quay trở lại giải pháp Javascript nếu có thể)

[EDIT]
Rất nhiều phiếu bầu, vì vậy tôi rõ ràng không phải là người duy nhất muốn biết, nhưng tôi đã có một câu trả lời cho đến nay về cơ bản nói rằng 'sử dụng javascript'. Tôi vẫn đang hy vọng một giải pháp sẽ không cần đến JS, hoặc tệ nhất là chỉ sử dụng nó như một phương án dự phòng khi tính năng CSS không hoạt động. Vì vậy, tôi sẽ đăng tiền thưởng cho câu hỏi, nếu có ai đó, ở đâu đó đã tìm ra câu trả lời.

[EDIT]
Bản cập nhật: Firefox đã đi vào chế độ phát triển nhanh chóng, nhưng mặc dù FF5 hiện đã được phát hành, tính năng này vẫn không được hỗ trợ. Và bây giờ đa số người dùng đã nâng cấp từ FF3.6, hack không còn là giải pháp nữa. Tin tốt mà tôi cho biết là nó có thể được thêm vào Firefox 6, với lịch trình phát hành mới sẽ ra mắt chỉ sau vài tháng nữa. Nếu đúng như vậy, thì tôi đoán mình có thể đợi nó ra, nhưng thật tiếc là họ không thể sắp xếp nó sớm hơn.

[CHỈNH SỬA CUỐI CÙNG]
Tôi thấy rằng tính năng dấu chấm lửng cuối cùng đã được thêm vào "Kênh Aurora" của Firefox (tức là phiên bản phát triển). Điều này có nghĩa là bây giờ nó sẽ được phát hành như một phần của Firefox 7, sẽ ra mắt vào cuối năm 2011. Thật là nhẹ nhõm.

Ghi chú phát hành có sẵn tại đây: https://developer.mozilla.org/en-US/Firefox/Releases/7

Spudley, bạn có thể đạt được điều tương tự bằng cách viết một đoạn mã JavaScript nhỏ bằng 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);
}

Tôi hiểu rằng phải có một số cách mà tất cả các trình duyệt đều hỗ trợ điều này nguyên bản (không có JavaScript) nhưng, đó là những gì chúng tôi có vào thời điểm này.

CHỈNH SỬA Ngoài ra, bạn có thể làm cho nó gọn gàng hơn bằng cách đính kèm một csslớp vào tất cả các trường có chiều rộng cố định fixWidth đó và sau đó làm điều gì đó như sau:

$(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

CHỈNH SỬA 30/09/2011

FF7 ra ngoài, lỗi này đã được giải quyết và nó hoạt động!

CHỈNH SỬA 29/08/2011

Vấn đề này được đánh dấu là đã giải quyết và sẽ có trong FF 7; hiện được phát hành vào ngày 27/09/2011.

Đánh dấu lịch của bạn và sẵn sàng xóa tất cả các thủ thuật mà bạn đã áp dụng.

CŨ

Tôi có một câu trả lời khác: đợi đã .

Đội ngũ nhà phát triển FF đang theo đuổi ráo riết để giải quyết vấn đề này.

Họ đã đặt bản sửa lỗi dự kiến ​​cho Firefox 6.

Firefox 6 !! Khi nào sẽ ra mắt?!?

Dễ dàng ở đó, người tưởng tượng, phản ứng quá mức. Firefox đang trên đà phát triển nhanh chóng. FF6 được phát hành sáu tuần sau Firefox 5. Firefox 5 được phát hành vào ngày 21 tháng 6 năm 2011.

Vì vậy, điều đó đặt bản sửa lỗi vào khoảng đầu tháng 8 năm 2011 ... hy vọng.

Bạn có thể đăng ký danh sách gửi thư theo lỗi từ liên kết trong câu hỏi của người đăng ban đầu.

Hoặc bạn có thể bấm vào đây ; cái nào dễ nhất.

Tôi phải nói rằng tôi hơi thất vọng vì bản hack trình duyệt cụ thể duy nhất trong ứng dụng của tôi sẽ hỗ trợ FF4. Giải pháp javascript ở trên không tính đến phông chữ có độ rộng thay đổi. Đây là một kịch bản dài hơn giải thích điều này. Vấn đề lớn với giải pháp này là nếu phần tử chứa văn bản bị ẩn khi chạy mã thì chiều rộng của hộp sẽ không được biết. Đây là một công cụ phá vỡ thỏa thuận đối với tôi vì vậy tôi đã ngừng làm việc / thử nghiệm nó ... nhưng tôi nghĩ tôi sẽ đăng nó ở đây trong trường hợp nó được sử dụng cho ai đó. Hãy chắc chắn để kiểm tra nó tốt vì thử nghiệm của tôi chưa đầy đủ. Tôi định thêm kiểm tra trình duyệt để chỉ chạy mã cho FF4 và cho phép tất cả các trình duyệt khác sử dụng giải pháp hiện có của họ.

Điều này sẽ có sẵn để thử tại đây: 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 (sử dụng 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);
    }
}

Nó sẽ được gọi là:

$(function(){
    ellipsify($('#test'));
});

Tôi cũng đã gặp phải gremlin này trong tuần qua.

Vì giải pháp được chấp nhận không tính đến phông chữ có độ rộng thay đổi và giải pháp của wwwhack có Vòng lặp Trong khi, tôi sẽ ném vào $ 0,02 của mình.

Tôi đã có thể giảm đáng kể thời gian xử lý vấn đề của mình bằng cách sử dụng phép nhân chéo. Về cơ bản, chúng tôi có một công thức giống như sau:

Biến x trong trường hợp này là những gì chúng ta cần giải quyết. Khi được trả về dưới dạng Số nguyên, nó sẽ cung cấp độ dài mới mà văn bản chảy tràn phải có. Tôi đã nhân MaxLength với 80% để cung cấp cho các hình elip đủ chỗ để hiển thị.

Đây là một ví dụ đầy đủ về 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>

Tôi hiểu đây là bản sửa lỗi chỉ dành cho JS, nhưng cho đến khi Mozilla sửa lỗi, tôi không đủ thông minh để đưa ra giải pháp CSS.

Ví dụ này phù hợp nhất với tôi vì JS được gọi mỗi khi lưới tải trong ứng dụng của chúng tôi. Chiều rộng cột cho mỗi lưới khác nhau và chúng tôi không có quyền kiểm soát loại máy tính nào mà người dùng Firefox của chúng tôi xem ứng dụng của chúng tôi (tất nhiên, chúng tôi không nên có quyền kiểm soát đó :)).

Giải pháp CSS thuần túy này thực sự gần gũi, ngoại trừ thực tế là nó khiến dấu chấm lửng xuất hiện sau mỗi dòng.