CSS での文字の折り返しに関するいくつかの問題-CSSチュートリアル-php.cn

CSS での文字の折り返しに関するいくつかの問題

高洛峰

リリース： 2016-11-24 13:24:15

オリジナル

1564 人が閲覧しました

CSS の単語区切りでこの問題を解決できます。メモを取るためのテストページを作成します。

CSS コード:

 body{font-size:14px;}
 p{ border:solid 1px red;width:200px;}
 
 
 
<body>
    <p class="test">English中文中文中文中文中文中文Englis333hEnglishEnglishEnglish中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 123ewewee
        123EnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglishEnglish
       
    </p>
</body>

ログイン後にコピー

この時点での実行効果は、タイトルの冒頭で述べたとおりです。 p タグ

css コード:

.test{ word-break:break-all;}

ログイン後にコピー

中国語、英語、数字を問わず、パッケージの p タグの末尾ですべてのテキストが自動的に強制的に改行されることがわかります。これには問題があります。効果を確認するために、元の組み合わせである文字列を分割します。別の

CSS コードを見てください:

.test {word-break:hyphenate;}

ログイン後にコピー

この CSS は、ラップされた要素の文字セグメントを分割し、ハイフネーションのところで事前にラップする可能性があります。ポイント

CSS コードをもう一度見てください:

 .test{ word-break:keep-all;}

ログイン後にコピー

すべての文字フィールドの整合性を維持しながら、すべての文字フィールドとそれらの間のスペースで新しい行をラップします。ラップされた要素の分割

word-break にはいくつかの属性もあります:

css コード:

 .test{ word-break:normal;}/*浏览器默认换行*/

ログイン後にコピー

単語の整合性を維持する必要がない場合、break-all は次の問題を解決できます。実際のアプリケーションでは、長さがコンテナの幅を超える単語は存在しないため、ハイフネーションを使用すると、コンテナを分割せずに単語を完全に保つという問題を解決できます。次に、シナリオによっては、スクロールバーまたはオーバーフローが発生します。 :hidden はインターフェースの整合性を維持するために使用できます。