HTML、CSS、JavaScriptで実現するエレガントな省略テクニック
HTMLとCSSで複数行のテキストに省略記号を適用する方法
Webページで長いテキストを扱う場合、すべて表示せず、必要な部分だけを表示して省略記号（…）で続きがあることを示すことがあります。これは、ユーザーの読みやすさを向上させ、ページの読み込み時間を短縮するのに役立ちます。
HTMLとCSSを使用して、複数行のテキストに省略記号を適用するには、いくつかの方法があります。
text-overflow プロパティは、テキストが要素の境界からはみ出した場合にどのように表示するかを制御します。このプロパティを使用して、省略記号を表示するように設定できます。
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
この例では、.ellipsis クラスが適用された要素内のテキストが要素の境界からはみ出した場合、省略記号が表示されます。
line-clamp プロパティは、要素内に表示されるテキスト行数を制限します。このプロパティを使用して、特定の行数を超えたテキストを省略記号で置き換えることができます。
.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
JavaScriptを使用して、テキストの長さに基づいて動的に省略記号を挿入することもできます。
function addEllipsis(element) {
const text = element.textContent;
const maxLength = 50; // 省略する最大文字数
if (text.length > maxLength) {
element.textContent = text.substring(0, maxLength - 1) + '...';
}
}
const elements = document.querySelectorAll('.ellipsis');
elements.forEach(addEllipsis);
この例では、.ellipsis クラスを持つすべての要素に対して addEllipsis 関数が呼び出され、テキストの長さが50文字を超えている場合は省略記号が挿入されます。
補足
- 上記の方法は、いずれも主要なブラウザで広くサポートされています。
- 省略記号の外観をカスタマイズするには、
::after疑似要素を使用できます。 - JavaScriptを使用する場合は、パフォーマンスを考慮する必要があります。
以下に、HTML、CSS、JavaScriptを使用して複数行のテキストに省略記号を適用するサンプルコードを示します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Ellipsis Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>長い見出し</h2>
<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi 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.</p>
<p class="ellipsis">Aliquam erat volutpat. Ut wisi 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.</p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
.container {
width: 500px;
margin: 0 auto;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
JavaScript
function addEllipsis(element) {
const text = element.textContent;
const maxLength = 50; // 省略する最大文字数
if (text.length > maxLength) {
element.textContent = text.substring(0, maxLength - 1) + '...';
}
}
const elements = document.querySelectorAll('.ellipsis');
elements.forEach(addEllipsis);
このコードを実行すると、以下のようになります。
- 見出しは長いですが、省略記号で省略されます。
- 2番目の段落は50文字を超えているため、最後の単語が省略記号で置き換えられます。
- 1番目の段落は50文字以内なので、省略記号は表示されません。
このサンプルコードはあくまでも基本的な例であり、必要に応じて変更することができます。
HTMLとCSSで複数行のテキストに省略記号を適用するその他の方法
前述の方法に加えて、HTMLとCSSを使用して複数行のテキストに省略記号を適用する方法はいくつかあります。以下に、いくつかの例をご紹介します。
display プロパティと white-space プロパティ
.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3; /* 3行のみ表示 */
-webkit-box-orient: vertical;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
この方法は、line-clamp プロパティを使用して、要素内に表示されるテキスト行数を制限し、white-space: nowrap プロパティを使用して、テキストが次の行に折り返されないようにすることで実現します。
display プロパティと max-height プロパティ
.ellipsis {
display: inline-block;
max-height: 100px; /* 高さを100pxに制限 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
この方法は、display: inline-block プロパティを使用して要素をインラインブロック要素にし、max-height プロパティを使用して要素の高さを制限することで実現します。テキストが要素の高さを超えた場合は、省略記号が表示されます。
flexbox レイアウト
.ellipsis {
display: flex;
flex-direction: column;
max-height: 100px; /* 高さを100pxに制限 */
overflow: hidden;
}
.ellipsis .line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
この方法は、flexbox レイアウトを使用して要素を垂直方向に配置し、max-height プロパティを使用して要素の高さを制限することで実現します。各行は .line クラスでスタイル設定され、white-space: nowrap プロパティと text-overflow: ellipsis プロパティを使用して省略記号を表示します。
上記以外にも、様々な方法で省略記号を実装することができます。最適な方法は、要件やデザインによって異なります。
html css ellipsis
