CSS を使用して長い HTML 見出しを省略記号で切り詰める方法

幅広いコンテンツの HTML タグに省略記号を挿入する

最新の Web デザインでは、さまざまなブラウザー ウィンドウ サイズに適応する伸縮性のあるレイアウトが採用されています。この柔軟性により、見出しなどの可変長の要素には課題が生じます。見出しがウィンドウよりも広くなるシナリオでは、見出しが複数の行に折り返されて、目的のレイアウトが損なわれる可能性があります。

この問題にエレガントに取り組むために、CSS を利用して見出しを 1 行で切り詰めるソリューションを検討してみましょう。コンテンツが利用可能な幅を超える場合は、省略記号 (...) を追加します。

CSS ベースのソリューション

次の CSS ベースのソリューションは、最新のブラウザーで効果的です。これは text-overflow プロパティを活用するためです:

<code class="css">.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}</code>

Usage

このソリューションを適用するには、見出しに省略記号クラスを追加するだけです:

<code class="html"><h2 class="ellipsis">This is a potentially long headline</h2></code>

ブラウザの互換性

この CSS のみのソリューションは、Firefox 6.0 を除くすべての主要な最新ブラウザで動作します。 Firefox 6.0 以前の場合は、この代替ソリューションで説明されているように、複数行の折り返しをサポートすることを検討してください。

以上がCSS を使用して長い HTML 見出しを省略記号で切り詰める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。