Don't let the text run around~_html/css_WEB-ITnose

In order to make the web page layout regular, we often need to control the length and height of text paragraphs.

When we confidently drew a DIV frame for these words, we found that these words were far more naughty than we thought.

　

 <div style="width:800px;height:50px;border:1px solid red;">  调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的   文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。调皮的文字捣蛋的文字。 </div>

The running results are as follows:

At this time we add overflow:hidden to the div; let it run Hide the words that come out, as shown in the picture

Don’t pinch it even if you look at it, add a white-space:nowrap, as shown in the picture:

It’s still not pretty enough, here’s another text-overflow: ellipsis, as shown in the picture:

It feels much better....

Okay, let the big guys laugh, actually I’m here to ask: How can I make the text display three lines and replace the overflowing text with an ellipsis at the end of the last line???

Please enlighten me!