Multi-dòng text-overflow: ellipsis trong CSS hay JS, với các thẻ img

Question

tôi đã cố gắng sử dụng: Tính năng ellipsis

• text-overflow trong CSS3 (nhưng không hỗ trợ đa dòng)
• nhiều jquery plugins như dotdotdot (http://dotdotdot.frebsite.nl/)
• jquery autoellipsis (http://pvdspek.github.com/jquery.autoellipsis/).

Tất cả các công cụ này hoạt động khá tốt nhưng nếu nội dung có hình ảnh thì chiều cao được tính để cắt ngắn với dotdotdot hoặc jquery.autoellipsis là sai.

Tôi đã tự hỏi liệu có ai đó có ý tưởng tuyệt vời để xử lý vấn đề này (có thể một số xử lý phía máy chủ không?), Cảm ơn trước :-).

Answer 1

Sử dụng bù trừ vị trí dấu ba chấm của riêng bạn bằng cách đặt chiều cao cố định cho nhiều dòng div, sau đó định vị hoàn toàn img và dấu ba chấm để đơn giản hóa tập lệnh. Mức chênh lệch phải là cụ thể cho font-size và kerning của các chữ cái cụ thể của mỗi câu, vì vậy việc thử và sai là cần thiết trừ khi sử dụng phông chữ đơn cách. Cấu trúc cơ bản giống như sau:

<style type="text/css"> 
.truncate { position: absolute; top: 20px; right: 6px; background-color: #fff; } 
.lineup { top: 6px; } 
.monalisa { position: absolute; top: 2px; left: -18px; } 
.wrapper { position: relative; width: 360px } 
.textblob { width: 330px; height: 30px; } 
</style> 
<!--...--> 
<div class="wrapper"> 
    <img class="monalisa" src="hppt://www.stackoverflow.com/favicon.ico" alt="SO"/> 
    <div class="textblob"> 
    <span class="truncate">…</span> 
    <span class="snippet">blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</span> 
    </div> 
</div> 

Answer 2

Nếu bạn cần hỗ trợ X-Browser (không chỉ cho Opera và Webkit, như @ c69 giải thích).

Tôi đã tìm thấy một cách ưa thích hơn. Nhưng cũng để điều chỉnh theo cách thủ công.

hãy xem ví dụ làm việc trên jsfiddle.

HTML

<p> 
    Lorem ipsum dolor sit amet, consectetur 
</p> 

css

p { 
    height: 3.7em; 
    position: relative; 
    overflow: hidden; 
    width: 235px; 
} 

p:after{ 
    /* works since IE10 , ff16, chrome26, safari6.1,opera12, android4.4 ; previouse browser need prefixes */ 
    background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,2055,255,1) 30%); 
    /* for IE9,IE8 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1); 
    bottom: 0; 
    content: "..."; 
    float:right; 
    padding-left: 10px; 
    position: absolute; 
    right: 0; 
} 

Nguồn:
1 mobify
2 css-tricks