ホームページ > ウェブフロントエンド > CSSチュートリアル > DIV 内で長い単語がオーバーフローしないようにするにはどうすればよいですか?

DIV 内で長い単語がオーバーフローしないようにするにはどうすればよいですか?

Susan Sarandon
リリース: 2024-12-16 19:42:17
オリジナル
985 人が閲覧しました

How Can I Prevent Long Words from Overflowing in a DIV?

DIV での長い単語のオーバーフローを克服する

DIV 要素を操作するときに直面する一般的な課題の 1 つは、テキストが DIV の幅を超えてしまい、コンテンツがコンテナの外にオーバーフローしてしまうことです。 。これは、過度に長い単語を扱う場合に特に顕著です。

この問題に対処し、テキストが DIV の境界内にぴったりと収まるように、CSS は解決策を提供します。

overflow-wrap を使用する: Break- word;

overflow-wrap プロパティを次のように設定することにより、 break-word を使用すると、ブラウザーは定義された DIV 幅内に収まるように適切な位置で単語を自動的に分割します。これにより、テキスト全体がオーバーフローすることなく表示されるようになります。

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

例:

<div>
ログイン後にコピー

overflow-wrap の使用: Break-word;指定された DIV 幅内にすべてのテキストが収まるようブラウザに強制し、必要に応じて長い単語を分割します。

注: IE6 などの古いブラウザとの互換性のために、非推奨のプロパティ ワードラップ: ブレークワード。ただし、代わりに最新の overflow-wrap プロパティを利用することをお勧めします。

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

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