長い英単語のページ表示問題をCSSで解決するには？-htmlチュートリアル-php.cn

長い英単語のページ表示問題をCSSで解決するには？

php中世界最好的语言

リリース： 2018-02-28 10:01:59

オリジナル

1573 人が閲覧しました

要するに

ページレイアウトでは、長い英語の単語が段落コンテナーからはみ出す状況によく遭遇します。この問題を解決するにはどうすればよいでしょうか。以下の比較デモンストレーションプログラムがコンパイルされました:

デモンストレーションプログラム

42du.cn - オンラインデモンストレーションプログラム

HTML コードの一部

<div class="block">    <h4>word-break:break-all;</h4>    <p class="break-all">Extraordinarily longlong word!</p></div>
CSS代码
 .break-all {    word-break: break-all;}.break-word {    word-wrap: break-word;}.hyphens {    word-wrap: break-word;    -webkit-hyphens: auto;    -ms-hyphens: auto;    hyphens: auto;}

ログイン後にコピー

問題

英語の段落組版では、長い英語の単語が頻繁に出現し、通常は By で表示されます。デフォルトでは、単語がコンテナの境界に達すると、自動的に次の行に移動します。また、単一の単語の長さがコンテナの幅よりも長い場合、コンテナの境界からオーバーフローします。記事「異常なほどページの長さがコンテナの境界をオーバーフローする」のデモの最初の部分を参照してください。

CSS の単語の改行というと、当然、単語分割と単語折り返しが思い浮かびます。具体的な違いは、デモの 2 番目の部分と 3 番目の部分を比較するとわかります。

word-break: Break-all;

上記のステートメントは、デモの 2 番目の部分で示されています。単語の形式がコンテナーの境界に達すると、単語は 2 つの部分に分割され、後の部分は次の行に移動して表示されます。段落の右側がこのようにきれいにレイアウトされており、その効果が気に入っています。ただし、ブレークオールを使用すると、行末の多くの単語が分割され、読書体験に影響を与えます。

word-wrap:break-word;

上記のステートメントは、デモの 3 番目の部分で示されています。単語の形式がコンテナーの境界に達すると、単語は次の行に移動されて最初に表示されます。単語の長さが線の幅を超えると、単語が途切れます。つまり、インライン切断が優先され、インライン切断が機能しない場合はワード切断が使用されます。このように、植字段落の右側は十分に整っていず、空白がありますが、大量の単語が壊れたりあふれたりすることはありません。

hyphens: auto;

上記のステートメントは、デモの 4 番目の部分で示されています。さらに一歩進んで、壊れた単語にハイフン (-) を追加したい場合は、ハイフン: auto を使用できます。ただし、このステートメントの互換性は現時点では非常に悪いです。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。