省略記号を使用して長すぎる HTML ヘッダーを切り詰めるにはどうすればよいですか?

幅が広すぎる HTML ヘッダーを切り詰めるためのエレガントなソリューション

調整可能なレイアウトを備えた動的な Web ページでは、さまざまな長さの見出し (h2) が発生するのが一般的です。これらの見出しがブラウザ ウィンドウの幅を超える場合、通常は複数行に分割されます。この望ましくない動作を回避するために、見出しテキストが複数行にオーバーフローする場合は、見出しテキストを切り詰めて省略記号 (...) を挿入する高度な解決策を検討してみましょう。

CSS の力を使用して、十字を考案できます。 -この切り捨てを簡単に実現するブラウザ ソリューション。コードは次のとおりです。

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

このコードは、特定のプロパティを持つ「ellipsis」という名前の CSS クラスを定義します。

• white-space: nowrap;: Preventsテキストが複数行に折り返されないようにします。
• overflow: hidden;: 要素の幅を超えるテキストを非表示にします。
• text-overflow: ellipsis; および -o-text-overflow: ellipsis;: 最新のブラウザーと Opera では、それぞれ切り詰められたテキストの末尾に省略記号 (...) を挿入します。

この CSS クラスを問題のある h2 要素に適用すると、テキストがオーバーフローした場合に要素が 1 行に切り詰められ、省略記号が表示されます。このソリューションは洗練されており、Firefox 6.0 を除くすべての主要ブラウザと互換性があります。 Firefox の以前のバージョンについては、複数行のテキストの折り返しに対処する他のリソースを参照してください。

以上が省略記号を使用して長すぎる HTML ヘッダーを切り詰めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。