ソース内の空白文字や改行、自動改行の扱いを指定
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
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版！
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
サンプルソース
<!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 プロパティ
要素の中の文字列を、ボックスの端まできたら自動折り返しするか、
指定する際に使用します。
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-wrap、pre-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>タグで書き、まったく 同一です。
ただし内包するテキストは、上は英文で、下は日本語で書いてあり両方とも２行目を改行しています。
下が表示結果です。英文の改行には空白(javascript と 123 の間)が入りますが
日本語では入っていません。些細なことですが......// 確認 IE7 Firefox9では空白が入っています。
javascript123.seesaa.net/
javascript 123.seesaa.net/
織田信長
織田 信長
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
指定した範囲内の文字を抜き出します。substring()メソッド
右から指定した文字数を取り出す substr()メソッド
左から指定した文字数を取り出します substr()メソッド
文字列から１文字取り出します。charAt()メソッド
正規表現による文字列置換 String.replace();
文字列の長さ(文字数)を取り出す。 length プロパティ
一致する文字列の有無を調べます。indexOf()メソッド
javascript 文字、文字列
javascript文字 点滅
