Do not run the text ~, Text running ~

Do not run the text ~, Text running ~

To make the webpage layout regular, we often need to control the length and height of text paragraphs.

When we draw a DIV box for these words with full confidence, we find that these words are far more naughty than we think.

<Div style = "width: 800px; height: 50px; border: 1px solid red;">
Naughty text. Naughty text. Naughty text. Naughty text. Naughty text. Naughty text. Naughty text. Naughty text. Naughty text. Naughty text. Naughty text. Naughty text. Naughty text. Naughty text. Naughty text. Naughty text. Naughty text.
</Div>

The running result is as follows:

 

In this case, we add overflow: hidden to the div to hide the running words,

Do not pinch it. Add another white-space: nowrap ,:

Still not beautiful enough. Another text-overflow: ellipsis ,:

I feel a lot better ....

Okay, let's make a joke. In fact, I am asking: How can I display three lines of text and replace the overflow text with a ellipsis at the end of the last line ???

Please kindly advise!