CSS で省略記号を使用して複数行のテキストオーバーフローを実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS で省略記号を使用して複数行のテキストオーバーフローを実現するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-03 09:38:11

オリジナル

776 人が閲覧しました

How to Achieve Multiline Text Overflow with Ellipsis in CSS?

省略記号付きの複数行テキストオーバーフロー

CSS では、text-overflow プロパティを使用して、指定された領域を超えるテキストを切り捨てることができます。ただし、デフォルトでは、この切り詰めは 1 行で行われます。場合によっては、表示すべき内容があることを示しながら、テキストを複数行で折り返せるようにすることが望ましい場合があります。

省略記号を使用して複数行のオーバーフローを実現する

この効果を実現するにはでは、次の CSS プロパティを利用できます:

display: -webkit-box;: このプロパティは、複数の行を収容できる柔軟なコンテナーを作成します。
-webkit-line-clamp: 3;: 許可される最大行数を示します。省略記号が表示される前 (例: 3 行の場合は 3 に設定)
-webkit-box-orient:vertical;: 行がコンテナー内で垂直にスタックされるようにします。
overflow: hidden; : コンテナからはみ出したテキストを非表示にします。 bounds.
text-overflow: ellipsis;: 表示されている最後の行の末尾に省略記号 (...) を追加します。

使用例

div {
  width: 300px;
  height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

ログイン後にコピー

これらのプロパティを設定すると、

要素は必要に応じて複数行に折り返されます。ただし、テキストが 3 行目の使用可能なスペースを超える場合、テキストは切り詰められ、末尾に省略記号が表示されます。

注: これらのプロパティは、WebKit ベースでのみサポートされています。 Chrome や Safari などのブラウザ。他のブラウザでは代替ソリューションが必要になる場合があります。

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