2012年09月27日

white-space プロパティ

スポンサード リンク

 ソース内の空白文字や改行、自動改行の扱いを指定
normal,nowrap,pre,pre-wrap,pre-line

white-space: normal;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

white-space: nowrap;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

white-space: pre;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

white-space: pre-wrap;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

white-space: pre-line;
雨にも負けず 風にも負けず 雪にも夏の暑さにも負けぬ 丈夫なからだをもち

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
 <head>
<title>white-space プロパティ</title>
<style type="text/css">
<!--
.Wnml{
 width : 300px;
 border : 1px solid lime;
 white-space : normal;  /* 初期値 */
  }

.Wnrp{
 width : 300px;
 border : 1px solid lime;
 white-space : nowrap;
  }

.Wpre{
 width : 300px;
 border : 1px solid lime;
 white-space : pre;
  }

.Wpre-wrap{
 width : 300px;
 border : 1px  solid lime;
 white-space : pre-wrap;
  }

.Wpre-line{
 width : 300px;
 border : 1px  solid lime;
 white-space : pre-line;
 }
-->
</style>
</head>
<body>
<p class="Wnml"><strong>white-space:normal;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち
<p class="Wnrp"><strong>white-space:nowwrap;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち
</p>
<p class="Wpre"><strong>white-space: pre;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち</p>
<p class="Wpre-wrap"><strong>white-space: pre-wrap;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち</p>
<p class="Wpre-line"><strong>white-space: pre-line;</strong><br>
雨にも負けず      風にも負けず     雪にも夏の暑さにも負けぬ
丈夫なからだをもち</p>
</body>
</html>
white-space プロパティ
  連続する複数のスペース、タブを1つの半角スペース(空白)にまとめるか、改行を空白に変換するか
要素の中の文字列を、ボックスの端まできたら自動折り返しするか、
指定する際に使用します。
white-space
normal
 連続する複数のスペース、タブを1つの空白(半角スペース)に転換。 改行を空白に変換。
ボックスの端までくると自動折り返しする。
任意の位置で改行する場合は、br要素などで行います。
nowrap
 normalと同様に連続するスペース、タブを1つの空白に転換。改行を空白に変換。
自動折り返しはしない。ボックスから文字が溢れる場合がある。
pre
 HTMLソースの連続するスペース、タブや改行がそのまま表示される。
自動折り返しはしない。
表示モードが互換モードのとき、IEでは無効 //確認 IE7
(参考)標準モードと互換モード , Mozilla's DOCTYPE
pre-wrap
  preと同様に連続するスペース、タブや改行がそのまま表示されるが
ボックスの端まで行くと自動的な折り返しがされます。
pre-line
  normalと同様に連続するスペース、タブを1つの空白に転換しますが
ソース内の改行位置で改行されます。
ボックスの端までくると自動折り返しする。

*) IE6, 7は  pre-wrappre-lineには未対応、normalと同様の表示になります。

HTML文の改行
<p class="Wnml">javascript123.seesaa.net/</p>
<p class="Wnml">javascript
123.seesaa.net/</p>
──────────────────────────
<p class="Wnml">織田信長</p>
<p class="Wnml">織田
信長</p>

 上記のコードをみてください。値は"normal"です。上下とも<p>タグで書き、まったく 同一です。
ただし内包するテキストは、上は英文で、下は日本語で書いてあり両方とも2行目を改行しています。
下が表示結果です。英文の改行には空白(javascript と 123 の間)が入りますが
日本語では入っていません。些細なことですが......// 確認 IE7  Firefox9では空白が入っています。

javascript123.seesaa.net/

javascript 123.seesaa.net/

織田信長

織田 信長

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
指定した範囲内の文字を抜き出します。substring()メソッド
右から指定した文字数を取り出す substr()メソッド
左から指定した文字数を取り出します substr()メソッド
文字列から1文字取り出します。charAt()メソッド
正規表現による文字列置換 String.replace();
文字列の長さ(文字数)を取り出す。 length プロパティ
一致する文字列の有無を調べます。indexOf()メソッド
javascript 文字、文字列
javascript文字 点滅



タグ:white-space
posted by javaScript at 16:16 | 大阪 ☀ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。