ホームページ > ウェブフロントエンド > CSSチュートリアル > 長いテキストが HTML のコンテナからオーバーフローしないようにするにはどうすればよいですか?

長いテキストが HTML のコンテナからオーバーフローしないようにするにはどうすればよいですか?

Barbara Streisand
リリース: 2024-12-04 15:24:11
オリジナル
889 人が閲覧しました

How Can I Prevent Long Text from Overflowing Its Container in HTML?

HTML のワードラップのジレンマ

問題:
「aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa」のような長いテキストは、指定されたコンテナの範囲を超える可能性があります。断片的な表示を作成します。この問題は、テキストが div の事前定義された幅を超えている場合に発生し、見苦しく読めないコンテンツになります。

解決策:

CSS 経由:

「word-wrap」として知られる CSS プロパティは、簡単な解決策を提供します。これを「break-word」に設定すると、指定したコンテナの幅を超える単語を分割するようにブラウザに指示します。これにより、指定されたスペース内でテキストがシームレスに流れるようになります。

サンプル コード:

div {
    width: 200px;
    word-wrap: break-word;
}
ログイン後にコピー

このコードを組み込むと、テキストが div の境界内で自動的に折り返され、読みやすさと読みやすさが維持されます。さまざまなウィンドウ サイズやデバイスの向きに合わせて調整できます。

以上が長いテキストが HTML のコンテナからオーバーフローしないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート