Почему я не могу усечь текст

Question

Я хочу обрезать текст после окончания слова, а не усекать половину слова, как в следующем примере.

JSFiddle

То, что я хочу сделать, я это ilustrated на изображении ниже:

Код:

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

Я думаю, это сработает.

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

Вы также можете проверить здесь: https://justmarkup.com/log/2015/07/dealing-with-long-words-in-css/

Answer 2

Насколько я знаю, свойство CSS text-overflow: ellipsis имеет ограничение в том факте, что он работает только на одной строке текста.

Так что для вашего вопроса, то я не считаю, что это возможно в простой CSS, чтобы достичь того, чего Вы желаете (или, по крайней мере, я не могу понять это)

я придумал с способ усечения слова на нескольких строках. Посмотрите этот JSFiddle или ниже фрагмент кода:

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>

Он использует псевдо элемент :before на «создать» эллипсы в правом нижнем углу.

Хотя это может быть простое решение ищете, я не считаю, что это возможно в более простой способ добиться того, что вы хотите в CSS (кто-то поправьте меня, если я ошибаюсь)

Примечание: Существует способ сделать это с JQuery и некоторые регулярные выражения

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

Вы можете использовать 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>