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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。