Text CSS multi-line overflow hide display ellipsis

Dealing with the problem of excessively long dynamic text:

As shown in the figure below, it obviously does not meet the aesthetic vision

At this point we can write like this, the text does not wrap and overflow and display the ellipsis:

{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width:200px//宽度看具体情况而定，父级限定宽度也可以
}

                    

The ellipsis is displayed when the text overflows in multiple lines:

{
    width:200px;
    overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

 In fact, multi-line overflow hiding also has its drawbacks. If there is very little text and only one line is displayed, it will still be jagged:

At this time, you can consider waterfall flow