ตัดทอนสตริงที่ยาวด้วย CSS: เป็นไปได้หรือยัง

มีวิธีที่ดีในการตัดทอนข้อความด้วย HTML ธรรมดาและ CSS หรือไม่เพื่อให้เนื้อหาแบบไดนามิกสามารถอยู่ในเลย์เอาต์ความกว้างคงที่และความสูงได้?

ฉันตัดทอนฝั่งเซิร์ฟเวอร์ด้วยความกว้างของลอจิคัล (นั่นคือจำนวนอักขระที่คาดเดาไม่ได้) แต่เนื่องจาก 'w' นั้นกว้างกว่า 'i' สิ่งนี้จึงมีแนวโน้มที่จะไม่ดีและยังต้องคาดเดาอีกด้วย ( และปรับแต่ง) จำนวนตัวอักษรสำหรับทุกความกว้างคงที่ โดยหลักการแล้วการตัดจะเกิดขึ้นในเบราว์เซอร์ซึ่งทราบความกว้างทางกายภาพของข้อความที่แสดงผล

ฉันพบว่า IE มีtext-overflow: ellipsisคุณสมบัติที่ทำสิ่งที่ฉันต้องการได้อย่างแน่นอน แต่ฉันต้องการสิ่งนี้เพื่อเป็นเบราว์เซอร์ข้าม คุณสมบัตินี้ดูเหมือนจะเป็นมาตรฐาน (ค่อนข้าง?)แต่ไม่รองรับ Firefox ฉันพบวิธีแก้ไขปัญหาต่าง ๆ ตามแต่พวกเขาอาจไม่แสดงจุดไข่ปลา (ฉันต้องการให้ผู้ใช้ทราบว่าเนื้อหาถูกตัดทอน) หรือแสดงตลอดเวลา (แม้ว่าเนื้อหาจะไม่ถูกตัดทอน)overflow: hidden

ใครบ้างมีวิธีที่ดีของการปรับข้อความแบบไดนามิกในเลย์เอาต์คงที่หรือการตัดทอนฝั่งเซิร์ฟเวอร์โดยความกว้างของลอจิคัลและเท่าที่ฉันจะได้รับในตอนนี้?

อัปเดต: text-overflow: ellipsisรองรับ Firefox 7 แล้ว (เปิดตัววันที่ 27 กันยายน 2011) เย้! คำตอบเดิมของฉันติดตามเป็นบันทึกประวัติศาสตร์

Justin Maxwell มีโซลูชัน CSS ของเบราว์เซอร์ข้าม มันมาพร้อมกับข้อเสีย แต่ไม่อนุญาตให้เลือกข้อความใน Firefox ตรวจสอบโพสต์แขกของเขาในบล็อกของ Matt Sniderสำหรับรายละเอียดทั้งหมดเกี่ยวกับวิธีการทำงาน

หมายเหตุเทคนิคนี้ยังป้องกันการอัปเดตเนื้อหาของโหนดใน JavaScript โดยใช้innerHTMLคุณสมบัติใน Firefox ดูจุดสิ้นสุดของโพสต์นี้เพื่อหาวิธีแก้ไข

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

ellipsis.xml เนื้อหาไฟล์

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

การอัพเดตเนื้อหาโหนด

หากต้องการอัปเดตเนื้อหาของโหนดในวิธีที่ใช้งานใน Firefox ให้ใช้สิ่งต่อไปนี้:

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

ดูโพสต์แมตต์สไนเดอร์สำหรับคำอธิบายของวิธีการทำงานนี้

2014 มีนาคม: การตัดทอนสตริงที่ยาวด้วย CSS: คำตอบใหม่โดยมุ่งเน้นที่การสนับสนุนเบราว์เซอร์

ตัวอย่างบนhttp://jsbin.com/leyukama/1/ (ฉันใช้ jsbin เพราะรองรับ IE เวอร์ชันเก่า)

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

คุณสมบัติ -ms-text-overflow CSS ไม่จำเป็น: เป็นคำพ้องของคุณสมบัติ CSS แบบ text-overflow แต่เวอร์ชันของ IE ตั้งแต่ 6 ถึง 11 รองรับคุณสมบัติ CSS แบบ text-overflow แล้ว

ทดสอบเรียบร้อยแล้ว (บน Browserstack.com) บน Windows OS สำหรับเว็บเบราว์เซอร์:

• IE6 ถึง IE11
• Opera 10.6, Opera 11.1, Opera 15.0, Opera 20.0
• Chrome 14, Chrome 20, Chrome 25
• Safari 4.0, Safari 5.0, Safari 5.1
• Firefox 7.0, Firefox 15

Firefox: Simon Lieschke ชี้ให้เห็น (อีกคำตอบ) Firefox สนับสนุนเฉพาะคุณสมบัติ CSS แบบข้อความล้นจาก Firefox 7 เป็นต้นไป (เผยแพร่เมื่อวันที่ 27 กันยายน 2011)

ฉันตรวจสอบพฤติกรรมนี้อีกครั้งใน Firefox 3.0 และ Firefox 6.0 (ไม่รองรับการล้นข้อความ)

จะต้องมีการทดสอบเพิ่มเติมในเว็บเบราว์เซอร์ Mac OS

หมายเหตุ: คุณอาจต้องการแสดงคำแนะนำเครื่องมือในการเลื่อนเมาส์เมื่อมีการใช้เครื่องหมายจุดไข่ปลาซึ่งสามารถทำได้ผ่าน javascript ดูคำถามนี้: การตรวจจับHTML การล้นข้อความHTMLและHTML - ฉันจะแสดงคำแนะนำเครื่องมือได้อย่างไรเมื่อเปิดใช้ไข่ปลา

แหล่งข้อมูล:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

หากคุณตกลงกับโซลูชัน JavaScript มีปลั๊กอิน jQuery ให้ทำในลักษณะข้ามเบราว์เซอร์ - ดูhttp://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis- สำหรับ -firefox ผ่านทาง jQuery /

ตกลง Firefox 7 ดำเนินการเช่นเดียวกับtext-overflow: ellipsis text-overflow: "string"รุ่นสุดท้ายมีการวางแผนสำหรับ 2011-09-27

วิธีแก้ไขปัญหาอื่นอาจเป็นชุดของกฎ CSS ต่อไปนี้:

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

ข้อเสียเปรียบเพียงอย่างเดียวกับ CSS ข้างต้นคือมันจะเพิ่ม "... " โดยไม่คำนึงถึงว่าข้อความล้นในคอนเทนเนอร์หรือไม่ อย่างไรก็ตามหากคุณมีกรณีที่คุณมีองค์ประกอบมากมายและมั่นใจว่าเนื้อหาจะล้นคุณคนนี้จะเป็นชุดของกฎที่ง่ายขึ้น

สองเซ็นต์ของฉัน หมวกออกไปกับเทคนิคดั้งเดิมโดย Justin Maxwell