CSSテキスト - 空白文字の表示方法設定 | white-space

2013/11/29 00:19更新
TAGS: | CSSテキスト|空白文字|white-space

本文はテキスト関連のCSS属性の white-space(空白文字の表示方法の設定) について学びたいと思います。


white-space属性



CSSのwhite-space属性は、空白文字(半角スペース、タブ、改行)の表示方法を設定します。

white-space属性の値
◇ normal: デフォルト値です。連続する(複数)空白文字を一つの半角スペースとして表示します。要素の大きさに応じて自動的に改行で折り返し表示します。
◇ pre: 連続する空白文字をそのまま表示します。
◇ nowrap: 連続する空白文字を一つの半角スペースとして表示します。要素の大きさに応じて自動的に折り返し表示をしません。

例:
p {
    white-space: pre;
}

※※※W3C仕様では、User-Agentはwhite-space属性を無視してもよいこととされております。

white-space属性の使用例


次の文字列を例にします。
行1:後ろに半角スペースを10個、タブ1個              。これから改行します。
行2:タブ4個+改行                
行3


◇ white-space : normal;
行1:後ろに半角スペースを10個、タブ1個 。これから改行します。 行2:タブ4個+改行 行3
◇ white-space:pre;
行1:後ろに半角スペースを10個、タブ1個 。これから改行します。 行2:タブ4個+改行 行3
◇ white-space:nowrap;
行1:後ろに半角スペースを10個、タブ1個 。これから改行します。 行2:タブ4個+改行 行3

著者について
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Sponsored Link


コメント

記事への評価

USER LOGIN FIRST
メールアドレス:
パスワード: