CSS で省略記号を使用して複数行のテキスト オーバーフローを作成する方法

CSS での省略記号を使用した複数行のテキスト オーバーフロー

省略記号を使用してテキスト オーバーフローを実現しますが、複数行を許可するのは難しい場合があります。ただし、CSS プロパティを使用するとこれを効果的に実現できます。

3 行の省略記号効果を作成するには、次のコードを使用します。

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

このコードでは、「-webkit-box」と「 -webkit-line-clamp」プロパティを使用して、テキストを 3 行のボックスに強制的に入れます。 「-webkit-box-orient」プロパティは方向を垂直に設定し、「overflow: hidden」と「text-overflow: ellipsis」は省略記号効果を作成します。

ブラウザの互換性の問題が発生した場合は、次のフォールバック オプション:

display: flex;
flex-wrap: wrap;
line-height: 1.5em;
height: 4.5em;
overflow: hidden;
text-overflow: ellipsis;

これらのプロパティも、テキストを強制的に複数行にし、省略記号のオーバーフローを許可します。

以上がCSS で省略記号を使用して複数行のテキスト オーバーフローを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。