css文字が省略記号を超えている代わりに役に立たない解決方法のまとめ大全

テキストが超えたら省略記号を表示するcssスタイルを貼り付けます.
1行のテキストが省略記号を超えています.

.cont{
     
	overflow:hidden;/*       */
	text-overflow:ellipsis;/*          */
	white-space:nowrap;/*       */
}

複数行のテキストが省略記号で表示されます.

.cont{
     
	overflow:hidden; /*       */
	text-overflow:ellipsis;/*          */
	display:-webkit-box; /*               */
	-webkit-box-orient:vertical;/*           （              ）*/
	-webkit-line-clamp:2; /*      css     ，          ，       。                  */
}

*autoprefixer管理ブラウザ接頭辞のプラグインがプロジェクトに組み込まれている場合.このプラグインは-webkit-などの接頭辞を付けるだけでなく、less、css、sassのスタイルを削除することもできます.lessファイルに書いてある-webkit-box-orient:vertical;プロパティが表示されない解決策:autoprefixer自動削除を閉じる

.cont{
     
	overflow:hidden; 
	text-overflow:ellipsis;
	display:-webkit-box; 
	/*! autoprefixer: off */
	-webkit-box-orient:vertical;
	/* autoprefixer: on */
	-webkit-line-clamp:2; 
}

2行のコメントを-webkit-box-orient:verticalに追加します.前後で、コメントを使用してautoprefixerを閉じます.注意:/*!Autoprefixer:off*/の!番号は省略できません.
重点は来ました:ブロガー本人はvantフレームワークのモバイル端末の開発を使って、以上の方法はすべてプラスして、しかし問題は依然として解決することができなくて、display:-webkit-boxをプラスします;逆にオーバーフロー表示省略符の効果は无効になります!!!単行省略は影響しませんが、複数行に省略記号を表示すると問題があります.そこで、資料やブログをめくって、以下の解決策を見つけました.クリックして参考原文のアドレスに入ります.
ネット上で与えられた言い方はすべて直接上を加えたもので、モバイル側では、最後の行のコードを加える必要があります.

.cont{
     
	overflow:hidden; 
	text-overflow:ellipsis;
	display:-webkit-box; 
	/*! autoprefixer: off */
	-webkit-box-orient:vertical;
	/* autoprefixer: on */
	-webkit-line-clamp:2; 
	word-break:break-all;/*       */
}

コード追加後、問題解決!
これで問題が解決する.