CSSのテキストを知るため徹底的に、空白行が問題を変更します

ワードブレイク

この属性は、ブラウザが自動的に改行を挿入するかどうか、コンテナを超えてテキストを決定します。

プロパティ値:

  • 通常:デフォルトの改行ルール - 改行文字は、連続ラップしない単位として、英語の単語を、直接の親要素のオーバーフロー
  • すべて-BREAKは:言葉を無視し、切り捨て親要素の位置のエッジに強制的に(最も省スペース、それが最もきちんとようだが、言葉はスプリットからのものであってもよいです)。さらに、連続する句読点では、私はなぜ知らない、折り返されません。
  • 日本と韓国のように、通常のをしても、継続的なテキストで包むいません(スペースで区切ったときにそこに折り返されます):すべてのキープ
  • * BREAK-ワード:これは、標準の属性のみいくつかのブラウザのサポートはありませんが、効果は同じワードラップ:ブレークワード;

 

ワードラップ(オーバーフローラップ)

これは、ブラウザでの内部ワードは、改行を挿入し、適切に切断されるべきではないかどうかを決定します。

プロパティ値:

  • ノーマル:改行のみが、このような単語の間のスペースのような場所で発生していること改行挿入ではない内部の単語単語を切り捨てられません。言葉は、超ロングオーバーフローの親コンテナである場合。
  • ワードBREAK:「は適切なカットオフポイントが存在しない場合、それは任意の位置にワードを切り詰めることができます。」説明:新しいラインが非常に長い場合、最初は、(この行が次の行にそれに適合していない)通常の改行をしてみてください、それは任意の位置に切り捨てられます。注:連続句読点は切り捨てられます。

 

ホワイトスペース

このプロパティは、ブラウザが空白や改行を処理する方法を決定します。

プロパティ値:

  • 通常:デフォルトの動作、改行が空白、空白の連続統合に変換するが、必要に応じて、行を変更します(英語のための「必須」いわゆる、それは行末の単語の後ろに次の単語がフィットし、全体を持っていないことを意味します次の行に、それは中国のラップのために自然です)
  • NOWRAP:通常のように、他の、しかしラップ「必要」が行われていない、殺さないラップ
  • ラップの保存連続空白、改行やBRタグを、しかし、自動的に改行を挿入しません。あらかじめ
  • 事前ラップ:ときに、自動的に改行のイベントでの保持連続空白、<BR>ラップは、改行を挿入し、「必要な。」
  • ラインを事前:自動的に改行を挿入し、改行、<BR>ラップの場合には、連続した空白をマージする「必要。」

 

これら3つの属性の関係は、私は次のことを理解してください。

まず、空白は改行をレンダリングするためにどのようにブラウザを決定し、それは改行を無視することを選択した場合、その後、改行を挿入し、自動的にブラウザを導くために、他の2つの属性が無効であり、かつ、自身の挿入改行は影響を受けません。

第二に、ワードラップに優先して単語ブレーク、ブラウザは全体として最初の単語になるため。例えば:

ワードブレーク値は正常ですかキープ全て、ロングワードオーバーフローコンテナがあるかもしれません。このとき、ワードラップ:ブレークワードは、ブラウザの究極の効果がブレークワードによって実証される、単語の途中から切断し、この状況に対処します。

ブレークすべてにワードブレークの値は、それほど長い単語を遮断することを余儀なくされる場合と、現時点ではワードラップが戦場に出ていないがあります。ブラウザの究極の効果は、ブレーク全てによって実証されます。

(PS:ブレークのすべての両方を設定し、ブレークワード、その後、句読点の長いリストは、未知の理由のために、折り返されません場合は...句読点通常のラップの長い文字列のために、唯一のブレーク単語を使用することをお勧めします)

 

したがって、需要が(通常はUGCテキスト表示)となるようであれば:

1.改行、空白として表示されます

2.通常のテキストの折り返しではなく、オーバーフローコンテナ

 

次に、属性の組み合わせは、以下のように設定する必要があります。

.text {
    white-space: pre-wrap;
    word-wrap: break-word;
}

 

おすすめ

転載: www.cnblogs.com/hx214blog/p/12337624.html