長い数字を表示する際にブラウザが長い数字や長い文字を自動的に折り返せない問題を解決_html/css_WEB-ITnose

Web ページで長い数字や長い文字の組み合わせが表示される場合、制御しないと Web ページのレイアウトが崩れ、表示が不完全になり、表示されたデータが失われる可能性があります。この種の文字列は通常は表示されませんが、制御されずに意図的に利用されると、Web ページ全体のレイアウトが破壊される可能性があります。今日はこの問題を解決します。

まず問題が何であるかを見てください:

例:

111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111

abcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabc dabcdabcdabc dabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd

ブログパークのレイアウトが崩れましたか？ ?

次に、この問題の理由を分析します:

個人的には、

長い数字と長い文字は 1 つの単語とみなされます

正直に言うと、単語は分割されてから表示されるべきではありません。 , もう誰もそれを知らないので、ブラウザは行を折り返さず、レイアウトが破壊されます。

そこで、この問題が発生するかどうかをブログパークのフラッシュメモリで試してみたところ、Google Chrome では正常でした

コードを見ると、word-wrap:break-word; となっていました。は、この文の意味は、

コンテンツが境界内で折り返されます

を削除すると、次のようになります

問題は解決したようですが、IEブラウザの調子が悪く、ぜひご覧ください。 写真:

変更はありません。改行のない長い数字だけです。

解決策は次のとおりです:

長い数字の外側に

タグを追加するだけです

解決後の IE の様子をご覧ください:

Google Chrome の様子:

🎜完璧な解決策です! 🎜 🎜