dấu ba chấm cho văn bản nhiều dòng trong Chrome

Question

Có bất kỳ thứ gì như -o-ellipsis-lastline cho Google Chrome không?

Tôi đang tạo tiện ích mở rộng của Chrome và muốn bỏ qua văn bản đa dòng bằng cách sử dụng CSS.

Answer 1

Không thể tạo ellips tinh khiết CSS do W3 spec for text-overflow.

Nhưng nếu bạn đang phát triển Chrome Extensions bạn đã sử dụng JavaScript, vì vậy đây là một số demo và plugin để giải quyết vấn đề của bạn:

• http://www.codeitbetter.co.uk/widgets/ellipsis/
• http://jsfiddle.net/danesparza/TF6Rb/1/
• http://jsfiddle.net/MPkSF/
• http://jsfiddle.net/VpmbL/
• https://github.com/pvdspek/jquery.autoellipsis

Tôi đang sử dụng plugin cuối cùng trên các dự án của riêng mình.

Answer 2

Hiện tại không có dấu ba chấm cho văn bản nhiều dòng ... Nhưng bạn có thể thực hiện hiệu ứng hình elip cho nhiều dòng bằng cách sử dụng các điều kiện đơn giản. Dưới đây là một ví dụ ...

Giả sử bạn có một html như thế này ...

<div class="class_name"><%=message%></div> 

Và bạn làm cho văn bản của bạn tại thời gian chạy ... văn bản của bạn sẽ được trả lại và được đặt trong thẻ div thay vì mẫu tin nhắn. Vì vậy, những gì bạn có thể làm là ...

<% if(message.length < 100) { %> 
    <div class="class_name"><%=message%></div> 
<% } else { %> 
    <div class="class_name"><%=message.slice(0,80)%>...</div> 
<% } %> 

Nếu văn bản của bạn là hơn 100 ký tự nó sẽ hiển thị một ảnh hưởng ellipsis (ở phần cuối của 80 ký tự)

Lưu ý: các giá trị 100 và 80 là không bắt buộc. Bạn có thể thay đổi khi bạn quan tâm ...

Hy vọng điều này sẽ giúp:) ...