Tại sao tôi không thể cắt bớt văn bản

Question

Tôi muốn cắt bớt văn bản sau khi kết thúc từ, không cắt ngắn một nửa từ, như trong ví dụ sau.

JSFiddle

Những gì tôi muốn làm tôi là ilustrated trong hình dưới đây:

Code:

div { 
 
    font-size: 20px; 
 
    width: 80%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    -webkit-box-orient: vertical; 
 
    display: -webkit-box; 
 
    -webkit-line-clamp: 2; 
 
}

<div> 
 

 
    Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut incididunt labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit 
 
    sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum 
 
    dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod 
 
    tempor incididunt ut labore. 
 

 
</div>

Answer 1

Tôi nghĩ cái này sẽ có hiệu quả.

div{ 
font-size:20px; 
width:80%; 
overflow: hidden; 
text-overflow: ellipsis; 
-webkit-box-orient: vertical; 
display: -webkit-box; 
-webkit-line-clamp: 2; 
-ms-word-break: break-all; 
word-break: break-all; 
word-break: break-word; 
} 

Bạn cũng có thể kiểm tra ở đây: https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/

Answer 2

Theo như tôi biết CSS tài sản text-overflow: ellipsis có một hạn chế trong thực tế là nó chỉ hoạt động trên một dòng duy nhất của văn bản.

Vì vậy, câu hỏi của bạn, tôi không tin điều đó là có thể trong CSS đơn giản để đạt được những gì bạn đang mong muốn (hoặc ít nhất là tôi không thể hình dung nó ra)

Tôi đã đưa ra một cách cắt ngắn một từ trên nhiều dòng. Xem này JSFiddle hoặc đoạn mã dưới đây:

div { 
 
    width: 80%; 
 
    overflow: hidden; 
 
    position: relative; 
 
    line-height: 1em; 
 
    max-height: 3em; 
 
    text-align: justify; 
 
    padding-right: 1em; 
 
    font-size: 20px; 
 
} 
 
div:before { 
 
    content: '...'; 
 
    position: absolute; 
 
    right: 2px; 
 
    bottom: 0px; 
 
}

<div> 
 

 
    Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod lorem tempor incididunt eiusmod tempor ut labore incididunt lorem ipsum et consectetur verylongwordrighthere elit sed do eiusmod tempor incididunt labore lorem ipsum dolor sit amet 
 
    consectetur adipiscing elitsed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt 
 
    ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing 
 
    elit sed do eiusmod tempor incididunt ut labore. 
 

 
</div>

Nó sử dụng các yếu tố giả :before để "tạo ra" một hình elip ở góc dưới bên phải.

Mặc dù nó có thể không phải là giải pháp dễ dàng tìm kiếm của bạn cho, tôi không tin điều đó là có thể theo một cách đơn giản hơn để đạt được những gì bạn muốn trong CSS (ai đó đúng cho tôi nếu tôi sai)

Note: có một cách để làm điều đó với jQuery và một số regex

p = $('p'); 
 
div = $('div').height(); 
 
while (p.outerHeight() > div) { 
 
    p.text(function(j, e) { 
 
    return e.replace(/\W*\s(\S)*$/, '...'); 
 
    }); 
 
}

div { 
 
    font-size: 20px; 
 
    width: 80%; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi purus et ut dictum ligula, dapibus testinglongword, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales 
 
    eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit purus posuere mauris, quis adipiscing ipsumel velit testinglongword rhoncus elementum vestibulum eget, dictum ut velit. 
 
    Nullam venenatis, elit in suscipit purus posuere mauris, quis adipiscing ipsum urna ac quam.</p> 
 
</div>

Answer 3

Bạn có thể sử dụng word-wrap: break-word;

div{ 
 
    height:50px; 
 
    font-size:20px; 
 
    width:80%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    position: absolute; 
 
    display: -webkit-box; 
 
    -webkit-line-clamp: 2; 
 
    word-wrap: break-word; 
 
margin-right: -0em; 
 
    padding-right: 0em; 
 
} 
 
div:before { 
 
    content: '...'; 
 
    position: absolute; 
 
    right: 1px; 
 
    bottom: 2px; 
 
}

<div> 
 

 
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. 
 

 
</div>