HTML、CSSにおける「第二行の省略」について
2024-09-17
HTMLとCSSの組み合わせで、テキストの第二行を省略し、省略記号（通常は「...」）を表示する手法を、「第二行の省略」または「ellipsis on second line」と呼びます。
HTMLの基礎
まず、HTMLの基礎知識が必要です。テキストを表示するには、<p>タグを使用します。
<p>This is a long text that will be truncated on the second line.</p>
CSSの適用
次に、CSSを使用してスタイルを適用します。
p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* ここで第二行の省略を指定 */
-webkit-box-orient: vertical;
}
解説
- -webkit-box-orient: vertical;
ボックスモデルのアイテムを垂直方向に配置します。 - -webkit-line-clamp: 2;
最大表示行数を2行に設定します。 - display: -webkit-box;
要素をボックスモデルに変換します。 - text-overflow: ellipsis;
溢れた部分を省略記号で表示します。 - overflow: hidden;
テキストがコンテナのサイズを超えた場合、溢れた部分を隠します。
注意
- 柔軟性
実際のデザインに合わせて、行数やフォントサイズ、コンテナの幅などを調整してください。 - ベンダープレフィックス
-webkit-は、Safariブラウザで使用されるベンダープレフィックスです。他のブラウザに対応するため、-ms-,-moz-,-o-などのプレフィックスも必要になる場合があります。
<p>This is a long text that will be truncated on the second line.</p>
CSS
p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 第二行の省略 */
-webkit-box-orient: vertical;
}
- HTML
<p>タグを使用して、テキストを表示します。 - CSS
動作
このコードにより、<p>タグ内のテキストが2行を超えた場合、第二行の末尾が省略記号で表示されます。
- line-clampプロパティ
- CSSレベル3で導入された新しいプロパティです。
- 複数の行を省略する際に便利です。
p {
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
JavaScriptによる方法
- DOM操作
const textElement = document.getElementById('myText');
const maxLines = 2;
if (textElement.offsetHeight > maxLines * textElement.clientHeight) {
textElement.textContent = textElement.textContent.slice(0, textElement.textContent.indexOf(' ', maxLines * textElement.clientHeight / textElement.lineHeight)) + '...';
}
- パフォーマンス
JavaScriptによる方法は、DOM操作が発生するため、パフォーマンスに影響を与える可能性があります。大量のテキストを扱う場合は、CSSのみによる方法が推奨されます。 - ブラウザサポート
line-clampプロパティは、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、JavaScriptによる方法を使用する必要があります。
html css ellipsis
