text-wrap …… テキストの折り返し方法を指定する
広告
text-wrapプロパティは、テキストの折り返し方法を指定する際に使用します。
■値
- normal
- 改行ルールにしたがって改行ポイントで改行される(初期値)
- nowrap
- 改行しない。テキストはコンテナブロック内に収まらずオーバーフローする
- balance
-
インラインレベル要素の場合には normal と同じ。
直下の子要素として行ボックスを含むブロックレベル要素の場合には、行ボックスのバランスが normalよりも良くなるならバランス調整される。
正確な挙動はユーザーエージェントが決定する
■初期値・適用対象・値の継承
- 初期値
- normal
- 適用対象
- すべての要素
- 値の継承
- する
■使用例
CSSソースは外部ファイル(sample.css)に記述
p.sample { width:100px; background-color:#99cc00; }
HTMLソース
<h5>text-wrap:normal; を指定</h5> <p class="sample" style="text-wrap:normal;"> Three frogs leaping together. They're three pyokopyoko. </p> <h5>text-wrap:nowrap; を指定</h5> <p class="sample" style="text-wrap:nowrap;"> Three frogs leaping together. They're three pyokopyoko. </p> <h5>text-wrap:balance; を指定</h5> <p class="sample" style="text-wrap:balance;"> Three frogs leaping together. They're three pyokopyoko. </p>
↓↓↓
ブラウザ上の表示
text-wrap:normal; を指定
かえる、ぴょこぴょこ、みぴょこぴょこ。
Three frogs leaping together. They’re three pyokopyoko.
text-wrap:nowrap; を指定
かえる、ぴょこぴょこ、みぴょこぴょこ。
Three frogs leaping together. They’re three pyokopyoko.
text-wrap:balance; を指定
かえる、ぴょこぴょこ、みぴょこぴょこ。
Three frogs leaping together. They’re three pyokopyoko.
広告