Cắt bớt chuỗi dài bằng CSS: khả thi chưa?

Có cách nào tốt để cắt bớt văn bản với HTML và CSS đơn giản, để nội dung động có thể phù hợp với bố cục chiều rộng và chiều cao cố định không?

Tôi đã cắt ngắn phía máy chủ theo chiều rộng logic (nghĩa là số lượng ký tự được đoán một cách mù quáng), nhưng vì 'w' rộng hơn 'i' nên điều này có xu hướng không tối ưu và cũng yêu cầu tôi phải đoán lại ( và tiếp tục điều chỉnh) số lượng ký tự cho mỗi chiều rộng cố định. Lý tưởng nhất là cắt ngắn sẽ xảy ra trong trình duyệt, trong đó biết chiều rộng vật lý của văn bản được hiển thị.

Tôi đã thấy rằng IE có một thuộc text-overflow: ellipsistính thực hiện chính xác những gì tôi muốn, nhưng tôi cần nó là trình duyệt chéo. Thuộc tính này có vẻ là tiêu chuẩn (phần nào?) Nhưng không được Firefox hỗ trợ. Tôi đã tìm thấy nhiều cách giải quyết khác nhau dựa trên overflow: hidden, nhưng chúng không hiển thị dấu chấm lửng (tôi muốn người dùng biết nội dung bị cắt ngắn) hoặc hiển thị mọi lúc (ngay cả khi nội dung không bị cắt cụt).

Có ai có một cách tốt để phù hợp với văn bản động trong một bố cục cố định, hoặc là cắt ngắn phía máy chủ theo chiều rộng logic tốt như bây giờ tôi sẽ có được không?

Cập nhật: text-overflow: ellipsishiện được hỗ trợ kể từ Firefox 7 (phát hành ngày 27 tháng 9 năm 2011). Yay! Câu trả lời ban đầu của tôi sau đây như một ghi chép lịch sử.

Justin Maxwell có giải pháp CSS trình duyệt chéo. Tuy nhiên, nó đi kèm với nhược điểm là không cho phép văn bản được chọn trong Firefox. Kiểm tra bài đăng của anh ấy trên blog của Matt Snider để biết chi tiết đầy đủ về cách thức hoạt động của nó.

Lưu ý kỹ thuật này cũng ngăn việc cập nhật nội dung của nút trong JavaScript bằng cách sử dụng thuộc innerHTMLtính trong Firefox. Xem phần cuối của bài đăng này để biết cách giải quyết.

CSS

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

ellipsis.xml nội dung tập tin

<?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>

Cập nhật nội dung nút

Để cập nhật nội dung của một nút theo cách hoạt động trong Firefox, hãy sử dụng như sau:

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);
    }
};

Xem bài viết của Matt Snider để biết giải thích về cách thức hoạt động của nó .

Tháng 3 năm 2014: Cắt ngắn chuỗi dài bằng CSS: một câu trả lời mới tập trung vào hỗ trợ trình duyệt

Bản demo trên http://jsbin.com/leyukama/1/ (Tôi sử dụng jsbin vì nó hỗ trợ phiên bản IE cũ).

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

Thuộc tính CSS -ms-text-overflow CSS là không cần thiết: nó là từ đồng nghĩa của thuộc tính CSS tràn văn bản, nhưng các phiên bản IE từ 6 đến 11 đã hỗ trợ thuộc tính CSS tràn văn bản.

Đã thử nghiệm thành công (trên Browserstack.com) trên HĐH Windows, cho các trình duyệt web:

• IE6 đến 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: như được chỉ ra bởi Simon Lieschke (trong một câu trả lời khác), Firefox chỉ hỗ trợ thuộc tính CSS tràn văn bản từ Firefox 7 trở đi (phát hành ngày 27 tháng 9 năm 2011).

Tôi đã kiểm tra lại hành vi này trên Firefox 3.0 & Firefox 6.0 (không hỗ trợ tràn văn bản).

Một số thử nghiệm thêm trên trình duyệt web Mac OS sẽ là cần thiết.

Lưu ý: bạn có thể muốn hiển thị một chú giải công cụ khi di chuột khi áp dụng dấu chấm lửng, điều này có thể được thực hiện thông qua javascript, xem câu hỏi này: Phát hiện dấu chấm lửng tràn văn bản HTML và HTML - làm cách nào tôi có thể hiển thị công cụ CHỈ khi dấu chấm lửng được kích hoạt

Tài nguyên:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compabilities
• http://css-tricks.com/snippets/css/truncate-opes-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/l Library /ie / ms531174 (v = vs85) .aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

Nếu bạn ổn với giải pháp JavaScript, có một trình cắm jQuery để thực hiện việc này theo kiểu trình duyệt chéo - xem http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for -firefox-via-jquery /

OK, Firefox 7 thực hiện text-overflow: ellipsiscũng như text-overflow: "string". Phát hành cuối cùng được lên kế hoạch cho 2011-09-27.

Một giải pháp khác cho vấn đề có thể là bộ quy tắc CSS sau:

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

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

Hạn chế duy nhất với CSS ở trên là nó sẽ thêm "..." bất kể văn bản có tràn bộ chứa hay không. Tuy nhiên, nếu bạn có trường hợp bạn có một loạt các yếu tố và chắc chắn rằng nội dung sẽ tràn ra, thì đây sẽ là một bộ quy tắc đơn giản hơn.

Theo quan điểm của tôi. Nắm bắt được kỹ thuật ban đầu của Justin Maxwell