長い単語が DIV レイアウトを壊さないようにするにはどうすればよいですか?

長い単語が Div を分割しないようにする

テーブルベースのレイアウトから DIV ベースのレイアウトに切り替えると、次のような一般的な問題が残ります。長い単語が DIV 列の端にはみ出して見苦しくなります。この問題は主要な Web サイトでも発生しており、日常的な単語でも長くなるドイツ語などの言語で特によく発生します。

解決策:

ソフト ハイフン

ソフトハイフン (­) を使用すると、ブラウザーの場所を指定できます。長い単語は分割する必要があります:

averyvery­longword

この文字を使用すると、ブラウザーは単語を「averyverylongword」または「averyvery-

longword」としてレンダリングできます。

正規表現では、戦略的にソフトを挿入するのを支援するハイフン:

/([^\s-]{5})([^\s-]{5})/ → ­

要素

または、HTML5 を挿入します。以前の IE 主義である要素:

averyvery<wbr>longword

これにより、ハイフンなしで単語が分割され、「averyvery

ロングワード」になります。

CSS ハイフン

最新バージョンの IE、Firefox、およびSafari (Chrome ではありません)、CSS ハイフンにより自動ハイフネーションが有効になります:

div.breaking {
  hyphens: auto;
}

この機能はハイフネーション辞書に依存しており、長い単語を常に一貫して分割できるわけではないことに注意してください。

オーバーフローとホワイトスペース: pre-wrap

その他の実行可能な解決策には、オーバーフローの制御と設定が含まれます事前にラップする空白:

div.breaking {
  overflow: hidden;
  white-space: pre-wrap;
}

どちらのアプローチでも、長い単語が DIV の境界を越えて拡張されるのを防ぎます。

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