Css Overflow Text Displayed In Few Lines Without Word Break

I have some long text that is displayed within a div this div has a fixed width and height. I want the text to be displayed on a few lines (as the div height) and that the sentence

Solution 1:

ellipsis wont work for multiple line and its not possible with pure CSS. Below is the trick which works on chrome and Safari (-webkit rendering engines).

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

<divclass="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>

for cross compatibility you should use SASS or javascript.

Using JS

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

Using CSS-SASS

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

Solution 2:

Thanks a lot BaTmaN this is the final result :

Added the following css will solve it:

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

and remove: white-space: nowrap;

http://jsfiddle.net/f5n1wrxs/