CSS を使用して HTML タグでのテキストのオーバーフローを防ぐにはどうすればよいですか?

テキストのオーバーフローを防ぐために HTML タグに省略記号を追加する

動的な Web ページできれいなレイアウトを維持することは、特にコンテンツが変化する場合に困難になる場合があります長さ的には。柔軟なレイアウトの見出し (h2) がブラウザ ウィンドウの幅を超える場合、見出しが複数の行に折り返されて、望ましくない外観が作成される可能性があります。

ありがたいことに、見出しを切り詰めて省略記号インジケーターを追加する洗練されたソリューションが実装されました ( ...) CSS のみを使用するだけで非常に簡単です。このクロスブラウザ ソリューションは、Firefox 6.0 を除くすべての最新ブラウザでシームレスに動作します。

次の CSS スタイルを見出しタグに適用すると、テキストが 1 行で表示され、必要に応じて省略記号で切り詰められるようになります。必要:

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

これらのプロパティを組み合わせると、テキストが折り返されずに 1 行に留まり、使用可能な幅を超えるオーバーフローが非表示になり、切り捨てを示す省略記号文字が追加されます。

複数行テキストの折り返しや古いバージョンの Firefox との互換性などの包括的なサポートについては、JavaScript ソリューションの実装を検討してください。

以上がCSS を使用して HTML タグでのテキストのオーバーフローを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。