テキストCSS複数行オーバーフロー非表示表示省略記号

過度に長い動的テキストの問題への対処：

下の図に示すように、それは明らかに美的ビジョンを満たしていません

この時点で、次のように書くことができます。テキストは折り返されたりオーバーフローしたりせず、省略記号が表示されます。

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

                    

テキストが複数行でオーバーフローすると、省略記号が表示されます。

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

 実際、複数行のオーバーフローの非表示にも欠点があります。テキストが小さく、1行しか表示できない場合でも、ギザギザになります。

このとき、滝の流れを考えることができます