【保存版】HTML、CSS、エリップシスで実現！CSSエリップシスを2行目に表示するプログラミング

2024-04-17

HTML、CSS、およびエリップシスを使用した「CSS エリップシスを 2 行目に表示する」プログラミング

長いテキストをブラウザ上で表示する場合、スペースが限られているため、すべてのテキストを表示できないことがあります。このような場合、エリップシスと呼ばれる省略記号を使用して、テキストが省略されていることを示すことができます。

CSS エリップシスを 2 行目に表示するには、いくつかの方法があります。このチュートリアルでは、line-clamp プロパティと text-overflow プロパティを組み合わせた方法を紹介します。

必要なもの

テキストエディタ
Web ブラウザ

手順

以下の HTML コードを作成します。

<!DOCTYPE html>
<html>
<head>
<title>CSS エリップシス</title>
<style>
.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="ellipsis">
  これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。
</div>
</body>
</html>

上記の HTML コードをテキストエディタに保存し、ellipsis.html という名前で保存します。
Web ブラウザを開き、ellipsis.html ファイルを開きます。

結果

上記のコードを実行すると、以下のようになります。

これは長いテキストです。これは長いテキストです。...

説明

display: -webkit-box プロパティは、要素をブロックレベル要素として表示し、複数行に分割できるようにします。
-webkit-line-clamp: 2 プロパティは、要素に最大 2 行のみ表示するように制限します。
-webkit-box-orient: vertical プロパティは、要素内のテキストを縦方向に配置します。
overflow: hidden プロパティは、要素の内容が要素の境界からはみ出さないようにします。

注意事項

line-clamp プロパティは、Webkit ブラウザ (Chrome、Safari など) のみでサポートされています。他のブラウザでは、エリップシスを 2 行目に表示できない場合があります。
エリップシスを確実に 2 行目に表示するには、テキストの長さを制限する必要があります。

代替方法

line-clamp プロパティがサポートされていないブラウザでは、JavaScript を使用してエリップシスを 2 行目に表示することができます。

このチュートリアルでは、CSS エリップシスを 2 行目に表示する方法を説明しました。他にもさまざまな方法がありますので、ご自身のニーズに合わせて最適な方法を選択してください。

サンプルコード：CSS エリップシスを 2 行目に表示する

<!DOCTYPE html>
<html>
<head>
<title>CSS エリップシス</title>
<style>
.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="ellipsis">
  これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。
</div>
</body>
</html>

CSS コード

.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis クラスは、エリップシスを表示する要素に適用されます。

実行方法

2 つのファイルを同じディレクトリに保存します。

これは長いテキストです。これは長いテキストです。...

方法 1：white-space: nowrap プロパティを使用する

この方法は、すべての行を 1 行として扱い、2 行目以降のテキストを省略記号で置き換えます。

<!DOCTYPE html>
<html>
<head>
<title>CSS エリップシス</title>
<style>
.ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px; /* テキストを表示する幅を指定 */
}
</style>
</head>
<body>
<div class="ellipsis">
  これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。
</div>
</body>
</html>

white-space: nowrap プロパティは、テキストの折り返しを禁止し、1 行に表示します。
width: 200px プロパティは、要素の幅を 200 ピクセルに設定します。

方法 2：display: -webkit-inline-box プロパティと -webkit-line-break: normal プロパティを使用する

この方法は、Webkit ブラウザ (Chrome、Safari など) でのみサポートされています。

<!DOCTYPE html>
<html>
<head>
<title>CSS エリップシス</title>
<style>
.ellipsis {
  display: -webkit-inline-box;
  -webkit-line-break: normal;
  max-height: 40px; /* テキストを表示する高さを指定 */
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="ellipsis">
  これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。これは長いテキストです。
</div>
</body>
</html>