ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。