Текст переполнения Css, отображаемый в нескольких строках без разрыва слова

Question

У меня есть длинный текст, который отображается в div, этот div имеет фиксированную ширину и высоту. Я хочу, чтобы текст отображался на нескольких строках (как высота div) и слова предложения не прерывались (префикс слова в одной строке и продолжение в следующей строке), кроме того, я хочу добавить многоточие в конце последнее предложение.

CSS:

white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 

но отображает текст в одной строке, даже если DIV содержит несколько строк.

Второй вариант:

word-wrap: break-word; 

это в отличие от первого перерыва слова и предложения отображается в нескольких строках - это никуда не годится, так как слова ломают в середине и в конце предложение не многоточие (...)

Как я могу получить следующие:

1) Несколько предложений, как высоту сНа

2) Ни одно слово не нарушать

3) В конце многоточие отображается (последняя строка содержит многоточие)

прилагается jsfiddle: https://jsfiddle.net/vghup5jf/1/ , как вы можете видеть только одну строку отображается

Answer 1

ellipsis не будет работать для нескольких строк, и это невозможно с чистым CSS. Ниже приведен трюк, который работает на хром и Safari (-webkit).

.ellipsis { 
 
    display: block; 
 
    display: -webkit-box; 
 
    max-width: 400px; 
 
    max-height: 100px; 
 
    font-size: 20px; 
 
    line-height: 1.4; 
 
    -webkit-line-clamp: 3; 
 
    -webkit-box-orient: vertical; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="ellipsis"> 
 
    <span> 
 
     I have a long text that display in div this div has a fixed width and height, I want the text will be displayed in a few lines (as the div height) and that the sentence words will not break(word prefix in one line and the continue in the next line) furthermore I want to add ellipsis at the end of the last sentence. 
 
     </span> 
 
</div>

для перекрестной совместимости следует использовать SASS или JavaScript.

Использование JS

https://css-tricks.com/line-clampin/

Использование CSS-SASS

http://codepen.io/martinwolf/pen/qlFdp

Answer 2

Большое спасибо Batman это окончательный результат:

Добавлен следующий CSS будет решить:

display: -webkit-box !important; -webkit-line-clamp: 2 !important; 
    -webkit-box-orient: vertical !important; 

и удаления: бело-пространство: Nowrap;

http://jsfiddle.net/f5n1wrxs/