ホームページ  >  記事  >  ウェブフロントエンド  >  ワードラップを使用してテキストオーバーフローの問題を解決する方法

ワードラップを使用してテキストオーバーフローの問題を解決する方法

巴扎黑
巴扎黑オリジナル
2017-04-05 16:42:273120ブラウズ

p の幅は明らかに制限されていますが、aaaaaaaaaa... などと入力すると、自動的に折り返されないことがわかりました(連続した文字は 1 つの単語として扱われます)。単語を折り返さないようにするための解決策は次のとおりです:

ワードブレーク:ブレークオールとワードラップ:ブレークワード

Word-break:break-all と word-wrap:break-word は、長い文字列の改行問題を解決するためによく使用されます。

一連のテストの結果、IE6/7/chrome/safari では word-break:break-all が同じであり、末尾の切り捨てが示されましたが、ff3.0/opera では無効であることがわかりました。長すぎる単語は新しい行で表示され、境界からはみ出します。

Word-wrap:break-word; は、IE6/7/chrome/safari でも同じです。長い単語は新しい行に折り返され、表示できなくなった場合は切り取られます。そしてff3.0/operaも無効のようです

明らかに word-wrap:break-word; の方がユーザー エクスペリエンスに即しており、外国人は英語の単語を細かく分割することを好みません。 ff3.0 と opera の場合、overflow-x:hidden でのみ非表示にできます(ff3.5 はすでにこの属性をサポートしています)。

そこで提案です

word-wrap:break-word;overflow-x:hidden;width:500px;

以上がワードラップを使用してテキストオーバーフローの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。