2012-03-01 69 views
5

Tôi đang cố gắng thêm một div kích thước cố định có thể bọc văn bản và cũng hiển thị dấu ba chấm trên tràn.CSS 2 Dòng Văn bản Bọc Ellipsis

Điều này có khả thi không?

Đây là nơi tôi đang ở cho đến nay:

.mydiv { 
 
     font-family: Georgia, "Times New Roman", Times, serif; 
 
     font-size: 14px; 
 
     line-height: 20px; 
 
     display: block; 
 
     overflow: hidden; 
 
     text-overflow: ellipsis; 
 
     width: 120px !important; 
 
     height: 40px !important; 
 
     border: 1px solid #000000; 
 
}
<div class="mydiv"> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div>

+0

trùng lặp của http://stackoverflow.com/questions/5914783/simulate-text-overflow-ellipsis-in-css2? – blobmaster

Trả lời

3

Như tốt nhất như tôi có thể nói, đây là không thể, không có: tất cả các hỗ trợ cho text-overflow: ellipsis đòi hỏi trắng-không gian: nowrap (mà rõ ràng là ràng buộc nó vào một dòng duy nhất, và không đáp ứng yêu cầu đầu tiên của bạn).

Đối với gói nhiều băng, sau đó dấu chấm lửng, tôi nghĩ bạn sẽ bị kẹt với giải pháp javascript (ví dụ: jTruncate).

+0

Đồng thời kiểm tra ví dụ: http://stackoverflow.com/questions/3404508/cross-browsers-mult-lines-text-overflow-with-ellipsis-appended-within-a-widthhe cho các giải pháp multiline & ellipsis khác. –

Các vấn đề liên quan