省略記号を使用して H2 タグ内のテキストをエレガントに切り詰める方法

省略記号を使用した HTML タグ内のテキストの切り詰め

レスポンシブ Web デザインの世界では、コンテンツが利用可能なサイズを超える可能性がある状況に遭遇するのが一般的です要素の幅が狭くなり、テキストの望ましくない折り返しや破損が発生します。動的テキスト長の見出し (h2) の場合、これは美観上の課題となる可能性があります。

問題:
h2 タグ内のコンテンツをエレガントに切り詰めて省略記号 ( ...) テキストが画面またはコンテナの利用可能な幅を超えた場合?

解決策:
幸いなことに、最新の Web ブラウザは CSS を使用したシンプルなクロスブラウザ ソリューションを提供します。次の CSS クラスを h2 タグに追加することで、目的の効果を実現できます:

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

この CSS クラスは、次の設定を適用します:

• white-space: nowrapPrevent折り返しから新しい行へのテキスト。
• overflow: hidden は、使用可能な幅を超えるコンテンツを非表示にします。
• text-overflow: ellipsis および -o-text-overflow: ellipsis (Opera の場合) ) 切り詰められたテキストの末尾に省略記号 (...) を表示します。

この CSS クラスを使用すると、h2 タグはコンテンツを適切に切り詰め、幅が広すぎる場合に省略記号を追加します。容器。この解決策は、Firefox 6.0 を除くすべての主要なブラウザーに対して有効であることに注意してください。 Firefox の以前のバージョンでのサポートについては、回答に記載されているリンクされた質問で提供されている解決策を検討してください。

以上が省略記号を使用して H2 タグ内のテキストをエレガントに切り詰める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。