How to wrap text till the allowed height, and then show ellipses if text overflows at the last line - CSS

Question

I have a div like this -:

<div id="prep">Hey jony whats up. The new solar radars are of great use and may evern put some of the wacky scientist to brain strom. Crazy!</div>.

This is the associated css -:

#prep {
    height:32px;
    font-weight:bold;
    overflow:hidden;
    text-overflow:ellipsis;
    font-family: Arial, Helvetica, sans-serif;
    font-size:13px;
    line-height:16px;
    display:block;
}

Clearly only 2 lines of text would be visible. But since all the text would not fit in the the div, i want to show ellipses at the end of last visible line of text.

Answer 1

You need to add a width, and white space.

    width: 56px;
    white-space: nowrap;