文字の制御 - wicky @ ウィキ

文字の制御

　white-spaceプロパティを利用して、半角スペース、タブ、改行といった空白文字の表示方法を制御することが可能。

■空白文字のプロパティ値

値	概要
normal	連続する半角スペース、タブ、改行を１つの半角スペースとして表示（デフォルト）
pre	連続する半角スペース、タブ、改行をそのまま表示
nowrap	連続する半角スペース、タブ、改行を１つの半角スペースとして表示。自動的な改行は行われない。

　以下に、空白改行もそのまま表示する際の例を示す。

●空白文字をそのまま表示する例

p.note { white-space : pre; }

●HTMLのサンプル

<p>
    妖怪の分類方法にはいろいろありますが、たとえば、出没場所などで、
    次のように分類することができる。
</p>
<p class="note">
    この分類には独自の見解が含まれています。
    学術的に正しいものではありませんので注意してください。
</p>

　また、text-transformプロパティを利用して、アルファベットなどのテキストを大文字として表示したり、小文字として表示することができる。

■大文字・小文字表示に関するプロパティ

値	概要
capitalize	単語の最初の文字を大文字で表示
uppercase	すべての文字を大文字で表示
lowercase	すべての文字を小文字で表示
none	記述どおりに表示（デフォルト）

　以下に、単語の最初の文字を大文字で表示する際の例を示す。

●空白文字をそのまま表示する例

p { text-transform : capitalize; }

●HTMLのサンプル

<p>
    Click a name below to jump to the page of each YOUKAI.
</p>