【CSS超解説】複数行のテキストがはみ出ないようにする3つの方法とサンプルコード
HTML、CSS、および省略記号（…）を使用して、複数行のあふれを処理する方法
要件
このチュートリアルを完了するには、以下のものが必要です。
- 基本的な HTML と CSS の知識
- テキストエディタ
手順
- HTML でコンテンツを作成する
まず、省略記号を使用するコンテンツを含む HTML を作成します。次の例では、div 要素内に複数の行のテキストが含まれています。
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
- CSS でスタイルを定義する
次に、CSS を使用して、省略記号を表示する要素をスタイル設定します。以下の例では、text-overflow: ellipsis プロパティを使用して、content クラスを持つ要素内のテキストがコンテナをオーバーフローしたときに省略記号を表示します。
.content {
width: 200px;
height: 50px;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
}
この CSS コードは次のことを行います。
widthとheightプロパティを使用して、content要素のサイズを定義します。overflow: hiddenプロパティを使用して、要素の内容が境界からはみ出ないようにします。white-space: normalプロパティを使用して、テキストが折り返されるようにします。text-overflow: ellipsisプロパティを使用して、テキストがオーバーフローしたときに省略記号を表示します。
結果
上記のコードをブラウザで表示すると、content 要素内のテキストが 2 行に表示されます。3 行目のテキストは省略記号 (...) で置き換えられます。
代替方法
-webkit-line-clamp プロパティを使用する
WebKit ブラウザ (Chrome、Safari など) では、-webkit-line-clamp プロパティを使用して、要素内に表示される行数を制限できます。この方法は、省略記号を表示する代わりに、最後の行のみを表示する場合に便利です。
.content {
-webkit-line-clamp: 2; /* 2 行のみ表示 */
}
注意事項
text-overflow: ellipsisプロパティは、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、省略記号が表示されない場合があります。-webkit-line-clampプロパティは WebKit ブラウザのみでサポートされています。他のブラウザでは動作しません。
デモ
このチュートリアルでは、CSS を使用して、HTML 要素内の複数行のテキストがコンテナをオーバーフローしたときに、省略記号 (...) をどのように表示するかについて説明しました。2 つの異なる方法を紹介しましたので、ニーズに合った方法を選択してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML、CSS、および省略記号（…）を使用して、複数行のあふれを処理する方法</title>
<style>
.content {
width: 200px;
height: 50px;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
CSS
.content {
width: 200px;
height: 50px;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
}
上記以外にも、省略記号を表示する方法はいくつかあります。詳細は、以下のリソースを参照してください。
CSS で省略記号を表示するその他の方法
text-overflow: ellipsis プロパティと max-width プロパティを組み合わせる
この方法は、要素の幅を制限し、テキストがオーバーフローしたときに省略記号を表示します。
.content {
max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.content {
display: inline-block;
max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.content {
-webkit-line-clamp: 2; /* 2 行のみ表示 */
}
JavaScript を使用して、要素内のテキストの長さに基づいて省略記号を動的に表示することもできます。
const contentElement = document.querySelector('.content');
const textLength = contentElement.textContent.length;
const maxLength = 20; // 省略記号を表示する最大文字数
if (textLength > maxLength) {
contentElement.textContent = contentElement.textContent.substring(0, maxLength - 3) + '...';
}
使用する方法は、要件と使用するブラウザによって異なります。
- WebKit ブラウザでのみ省略記号を表示したい場合:
-webkit-line-clampプロパティを使用します。 - より動的な制御が必要な場合: JavaScript を使用します。
各方法の動作を確認するには、以下の CodePenデモをご覧ください。
省略記号の表示方法については、以下のリソースも参考にしてください。
html ellipsis css
