text-overflow: จุดไข่ปลาใน Firefox 4? (และ FF5)

text-overflow:ellipsis;คุณสมบัติ CSS ต้องเป็นหนึ่งในไม่กี่สิ่งที่ไมโครซอฟท์มีสิทธิทำเว็บ

ตอนนี้เบราว์เซอร์อื่น ๆ ทั้งหมดรองรับ ... ยกเว้น Firefox

นักพัฒนาไฟร์ฟอกซ์โต้เถียงกันมาตั้งแต่ปี 2548แต่ถึงแม้จะมีความต้องการที่ชัดเจน แต่ดูเหมือนว่าพวกเขาจะไม่สามารถนำตัวเองไปใช้งานได้จริง (แม้แต่การทดลอง-moz-ใช้งานก็เพียงพอแล้ว)

ไม่กี่ปีที่ผ่านมาคนที่ทำงานออกวิธีการสับ Firefox 3 จะทำให้มันสนับสนุนจุดไข่ปลา แฮ็คใช้-moz-bindingคุณลักษณะนี้เพื่อใช้งานโดยใช้ XUL ขณะนี้มีไซต์จำนวนมากใช้แฮ็กนี้

ข่าวร้าย? Firefox 4 กำลังลบ-moz-bindingคุณลักษณะนี้ซึ่งหมายความว่าการแฮ็กนี้จะไม่ทำงานอีกต่อไป

ดังนั้นทันทีที่ Firefox 4 เปิดตัว (ปลายเดือนนี้ฉันได้ยิน) เราจะกลับไปที่ปัญหาที่ไม่สามารถรองรับฟีเจอร์นี้ได้

คำถามของฉันคือ: มีวิธีอื่นในการแก้ปัญหานี้หรือไม่? (ฉันพยายามหลีกเลี่ยงการถอยกลับไปใช้โซลูชัน Javascript ถ้าเป็นไปได้)

[แก้ไข]
คะแนนโหวตมากมายเห็นได้ชัดว่าฉันไม่ใช่คนเดียวที่อยากรู้ แต่ตอนนี้ฉันมีคำตอบเดียวซึ่งโดยพื้นฐานแล้วพูดว่า 'ใช้จาวาสคริปต์' ฉันยังคงหวังว่าจะได้โซลูชันที่ไม่จำเป็นต้องใช้ JS เลยหรือที่แย่ที่สุดก็คือใช้เป็นแบ็คกราวด์ที่ฟีเจอร์ CSS ไม่ทำงาน ดังนั้นฉันจะโพสต์ความโปรดปรานให้กับคำถามหากมีใครบางคนพบคำตอบ

[แก้ไข]
การอัปเดต: Firefox เข้าสู่โหมดการพัฒนาอย่างรวดเร็ว แต่ถึงแม้ว่า FF5 จะเปิดตัวคุณลักษณะนี้แล้วก็ยังไม่รองรับ และตอนนี้ผู้ใช้ส่วนใหญ่ได้อัปเกรดจาก FF3.6 แล้วการแฮ็กไม่ใช่วิธีแก้ปัญหาอีกต่อไป ข่าวดีที่ฉันได้รับแจ้งว่ามันอาจจะถูกเพิ่มใน Firefox 6 ซึ่งมีกำหนดการวางจำหน่ายใหม่ในอีกไม่กี่เดือน หากเป็นเช่นนั้นฉันคิดว่าฉันสามารถรอได้ แต่น่าเสียดายที่พวกเขาไม่สามารถจัดการได้เร็วกว่านี้

[แก้ไขขั้นสุดท้าย]
ฉันเห็นว่าในที่สุดฟีเจอร์จุดไข่ปลาได้ถูกเพิ่มลงใน "Aurora Channel" ของ Firefox แล้ว (คือเวอร์ชันระหว่างการพัฒนา) ซึ่งหมายความว่าตอนนี้ควรจะเปิดตัวเป็นส่วนหนึ่งของ Firefox 7 ซึ่งมีกำหนดออกในปลายปี 2554 ช่างน่าโล่งใจ

บันทึกประจำรุ่นที่นี่: https://developer.mozilla.org/en-US/Firefox/Releases/7

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

แก้ไข 30/09/2554

FF7 หมดแล้วข้อบกพร่องนี้ได้รับการแก้ไขและใช้งานได้!

แก้ไข 29/08/2554

ปัญหานี้ถูกระบุว่าได้รับการแก้ไขแล้วและจะพร้อมใช้งานใน FF 7; ปัจจุบันมีกำหนดเผยแพร่ในวันที่ 27 กันยายน พ.ศ. 2554

ทำเครื่องหมายปฏิทินของคุณและเตรียมพร้อมที่จะลบแฮ็กทั้งหมดที่คุณวางไว้

เก่า

ฉันมีคำตอบอื่น: รอรอ

ทีมนักพัฒนา FF กำลังพยายามอย่างเต็มที่เพื่อแก้ไขปัญหานี้

พวกเขามีชุดแก้ไขเบื้องต้นสำหรับ Firefox 6

Firefox 6 !! จะออกมาเมื่อไหร่!?

ง่ายมีจินตนาการคนที่มีปฏิกิริยามากเกินไป Firefox อยู่ในเส้นทางการพัฒนาที่รวดเร็ว FF6 ถูกกำหนดให้วางจำหน่ายหกสัปดาห์หลังจาก Firefox 5 Firefox 5 วางจำหน่ายในวันที่ 21 มิถุนายน 2554

นั่นทำให้การแก้ไขในช่วงต้นเดือนสิงหาคม 2554 ... หวังว่า

คุณสามารถลงทะเบียนรายชื่อผู้รับจดหมายตามจุดบกพร่องได้จากลิงก์ในคำถามของผู้โพสต์ต้นฉบับ

หรือคุณสามารถคลิกที่นี่ ; แบบไหนง่ายที่สุด

ฉันต้องบอกว่าฉันผิดหวังเล็กน้อยที่แฮ็คเฉพาะเบราว์เซอร์เดียวในแอปพลิเคชันของฉันจะรองรับ FF4 โซลูชัน javascript ข้างต้นไม่ได้คำนึงถึงแบบอักษรที่มีความกว้างตัวแปร นี่คือสคริปต์ verbose เพิ่มเติมที่อธิบายถึงสิ่งนี้ ปัญหาใหญ่ในการแก้ปัญหานี้คือหากองค์ประกอบที่มีข้อความถูกซ่อนไว้เมื่อรันโค้ดจะไม่ทราบความกว้างของกล่อง นี่เป็นตัวทำลายข้อตกลงสำหรับฉันดังนั้นฉันจึงหยุดทำงาน / ทดสอบ ... แต่ฉันคิดว่าฉันจะโพสต์ไว้ที่นี่ในกรณีที่มีคนใช้ อย่าลืมทดสอบด้วยเพราะการทดสอบของฉันน้อยกว่าที่ละเอียดถี่ถ้วน ฉันตั้งใจจะเพิ่มการตรวจสอบเบราว์เซอร์เพื่อเรียกใช้โค้ดสำหรับ 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 มี 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'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 ที่แท้จริงนี้อยู่ใกล้มากยกเว้นข้อเท็จจริงที่ทำให้จุดไข่ปลาปรากฏขึ้นทุกบรรทัด