『タグは折り返して表示したくない！』やこの文章は2行に渡らせることなく一行で表示したい！！！ そんなときに使うのが white-spaceプロパティの『nowrap』 これを使うと折り返すことなく一文を表示してくれます。
white-spaceプロパティ
white-spaceプロパティというのは、当該要素に含まれる半角スペースや水平タブ、行送りなどの空白類文字をどのように処理するかを指定します。（※ 全角スペースは空白類文字に含まれません）
どういうことかと言うと、行の折り返し位置を決めるということです。
white-spaceプロパティ の内容はこちら。
| 値 | 値のキーワード |
|---|---|
| normal | 連続する空白類文字をひとつの半角スペースにまとめ 行ボックスが満たされると折り返す |
| pre | 連続する空白類文字をそのまま表示 行内容を折り返さない |
| nowrap | 連続する空白類文字をひとつの半角スペースにまとめ 行内容を折り返さない |
| pre-wrap | 連続する空白類文字をそのまま表示しますが 行内容のテキストが長い場合には、画面の表示域に対して 折り返して表示する |
実際に使用してみる
実際にどのようになるのか作ってみました。
図を見ていただくとわかる通りnowrapを使うと折り返すことなく一文を表示していると思います。
中身はこんな感じになっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
/*-[HTML部分 ]--------------------*/ <h2>normal</h2> <p class="sample1"> 四葉のクローバーを 見つけるために 三つ葉のクローバーを 踏みにじってはいけない 幸せはそんな風に探すものじゃない。 ｢引用元不明｣ </p> <h2>pre</h2> <p class="sample2"> 四葉のクローバーを 見つけるために 三つ葉のクローバーを 踏みにじってはいけない 幸せはそんな風に探すものじゃない。 ｢引用元不明｣ </p> <h2>nowrap</h2> <p class="sample3"> 四葉のクローバーを 見つけるために 三つ葉のクローバーを 踏みにじってはいけない 幸せはそんな風に探すものじゃない。 ｢引用元不明｣ </p> <h2>pre-wrap</h2> <p class="sample4"> 四葉のクローバーを 見つけるために 三つ葉のクローバーを 踏みにじってはいけない 幸せはそんな風に探すものじゃない。 ｢引用元不明｣ </p> /*-[CSS部分 ]--------------------*/ p.sample1{white-space: normal;} p.sample2 {white-space: pre;} p.sample3 {white-space: nowrap;} p.sample4 { width:400px; background-color:#FFF; border: 1px solid #ccc; color: #555; white-space: pre-wrap;} p.sample1, p.sample2, p.sample3,{ width:400px; background-color:#FFF; border: 1px solid #ccc; color: #555; } |
ボックスの大きさは、400pxで それぞれ表に書いてあるwhite-spaceプロパティを付加しています。
ただ、最後のpre-wrapは、ボックスの大きさを小さくしたほうが分かり易いと思い、ここだけ100pxで作成してあります。
white-spaceプロパティを使う際には、
pre、または nowrap が指定された場合、行内容のテキストが長すぎると、表示域に対して自動的に行の折り返しが行われるのではなく、行末での折り返しが抑制されるため、行ボックス、さらには表示域からテキストがはみ出て、ページ全体に横スクロールを生じさせることもあるので、必要であればoverflowプロパティで制御しなければいけないかなと思います。
※ 補足ですがUA は white-spaceプロパティによる指定を無視しても良いというのが仕様らしいので、もしかしたらうまく表示されないことがあるかもしれませんのでご注意を。
