plate-73496_640

タグは折り返して表示したくない!』やこの文章は2行に渡らせることなく一行で表示したい!!! そんなときに使うのが  white-spaceプロパティの『nowrap』 これを使うと折り返すことなく一文を表示してくれます。

white-spaceプロパティ

white-spaceプロパティというのは、当該要素に含まれる半角スペースや水平タブ、行送りなどの空白類文字をどのように処理するかを指定します。(※ 全角スペースは空白類文字に含まれません)

どういうことかと言うと、行の折り返し位置を決めるということです。

white-spaceプロパティ の内容はこちら。

white-space
値のキーワード
normal 連続する空白類文字をひとつの半角スペースにまとめ 行ボックスが満たされると折り返す
pre 連続する空白類文字をそのまま表示 行内容を折り返さない
nowrap 連続する空白類文字をひとつの半角スペースにまとめ 行内容を折り返さない
pre-wrap 連続する空白類文字をそのまま表示しますが 行内容のテキストが長い場合には、画面の表示域に対して 折り返して表示する

実際に使用してみる

実際にどのようになるのか作ってみました。

図を見ていただくとわかる通りnowrapを使うと折り返すことなく一文を表示していると思います。

中身はこんな感じになっています。

ボックスの大きさは、400pxで それぞれ表に書いてあるwhite-spaceプロパティを付加しています。

ただ、最後のpre-wrapは、ボックスの大きさを小さくしたほうが分かり易いと思い、ここだけ100pxで作成してあります。

white-spaceプロパティを使う際には、

pre、または nowrap が指定された場合、行内容のテキストが長すぎると、表示域に対して自動的に行の折り返しが行われるのではなく、行末での折り返しが抑制されるため、行ボックス、さらには表示域からテキストがはみ出て、ページ全体に横スクロールを生じさせることもあるので、必要であればoverflowプロパティで制御しなければいけないかなと思います。

※ 補足ですがUA は white-spaceプロパティによる指定を無視しても良いというのが仕様らしいので、もしかしたらうまく表示されないことがあるかもしれませんのでご注意を。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る