CSSのテキストオーバーフロー部分の代わりに省略記号を使用

文字オーバーフロー部分の代わりに省略記号を使用する場合は、単一行の場合と多行の場合の2つに分けられます.
①一方通行の場合、直接コードを載せる
HTMLセクション

CSS部

.nav{
	display:block; /*       */
	width:50px;  /*           */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

}

②複数行の場合も、直接コード
HTMLセクション

CSS部

.nav{
    display: block;
    width:100px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;  /*      */
    overflow: hidden;
}

ただし、この方法はWebkitブラウザおよびモバイル端末にのみ適用されるので、他のブラウザに適用する方法を以下に書きます.
HTMLセクション

CSS部

.nav{
	display:block; /*       */
	position: relative;
	line-height: 20px;
	width: 100px; 
	height: 40px;  /*             */
	overflow: hidden;
}
.nav::after{
    content: "..."; 
    position: absolute;
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(left, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

以上がすべてですが、特に説明しますと、個人的に文字を書くのはspanというラベルが好きなので、毎回ブロックレベルの要素に変換していますが、それ自体がブロックレベルの要素であれば、これ以上変換する必要はありません.
もう一つの説明は、本文の最後の部分は
https://blog.csdn.net/diaoleiluomulaojin/article/details/77007901
このブログは、私自身の理解に基づいて修正して整理して、みんなに役に立つことを望みます!!!