Div に長い単語が含まれないようにするにはどうすればよいですか?

長い単語が Div を壊さないようにする

table レイアウトから div レイアウトへの移行において、1 つの永続的な問題が残ります。 div 列の境界を越えた過度に長い単語の拡張。この現象は、著名なサイト、特に本質的に長い用語を含む言語を特集するサイトでさえ頻繁に目撃されているように、Web サイトの美観と専門性を損なう可能性があります。

解決策 1: ソフト ハイフン

長い単語の中にソフトハイフン (­) を挿入すると、ブラウザが適切な区切りを決定できるようになりますポイント:

averyvery­longword

これにより、次のようにレンダリングされます:

averyverylongword

または

averyvery-
longword

解決策 2: 要素

または、要素を使用すると、ハイフンを導入せずに潜在的なブレーク ポイントを示すことができます:

averyvery<wbr>longword

これにより、単語がブレーク ポイントできれいに分割されます:

averyvery
longword

解決策 3: CSS ハイフン(Chrome ではサポートされていません)

CSS ハイフン (Chrome ではサポートされていません) hyphens: auto;) 辞書に基づいて単語を自動的にハイフネーションします。両端揃えのテキストの外観を向上させることはできますが、長い単語が div 境界を超えないようにするための信頼できる解決策ではありません。

遡及的解決策: display: table-cell

レイアウトの目的で非推奨になっているにもかかわらず、表示: table-cell;プロパティは他の要素にも適用でき、表のセルの伸縮動作をエミュレートし、長い単語を収容するために動的に拡張されます。

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