CSS はテキストの 2 行目にのみ省略記号を作成できますか?

2 行目の CSS 省略記号の実現

次のような疑問が生じます: CSS text-overflow: ellipsis を特に 2 行目に適用できますか?文章？細心の注意を払って調査しても、実行可能な解決策は見つかりませんでした。別のアプローチを検討してみましょう:

WebKit ブラウザ ソリューション:

次の CSS コードは WebKit ブラウザをターゲットにしており、効果的に 2 行目に省略記号を生成します:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

を理解するコード:

• オーバーフロー: 非表示により、コンテナ領域外のオーバーフローが防止されます。
• テキスト オーバーフロー: 省略記号は切り捨て時に省略記号をトリガーします。
• 表示: -webkit-box および -webkit-box-orient: 垂直方向で -webkit-line-clamp プロパティを有効にします
• -webkit-line-clamp: 3 は、最大 3 行が表示されることを指定し、実質的に省略記号を 2 行目に制限します。

以上がCSS はテキストの 2 行目にのみ省略記号を作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。