CSS 基礎チュートリアル

CSS 盒子モデル

CSS3基本チュートリアル

CSS 参考マニュアル

CSS @ルール(RULES)

CSS word-wrap(自動改行)

CSS word-wrap属性使用目的長い単語を折れ字にして次の行に自動的に改行します。不可破の文字列が非常に長く、コンテナボックスに収まらない場合、この属性を使用してオーバーフローを防ぎます。

CSS 文字改行値

値	説明
normal	この属性は許可された断点で単語を断ち切るためにのみ使用されます。
break-word	この属性は不可破の単語を断ち切るために使用されます。
initial	この属性はデフォルト値に設定するために使用されます。
inherit	この属性は親要素から継承されます。

CSS オートリターンオンラインサンプル

例

<!DOCTYPE　html>
<html>
<head>
<style>　
p.test　{
　　　　width:　11em;
　　　　background-color:　#ff9900;　
　　　　border:　1px solid #ffffff;
　　　　padding:10px;
　　　　word-wrap:　break-word;
}
</style>
</head>
<p class="test">　この段落には、非常に長い単語があります：
　<p class="test">　この段落には、非常に長い単語があります：iamsooooooooooooooooooooooooooooooooooooolongggggggggggggggg.その長い単語は折れ字になり、次の行に折り返されます.</p>
</html>

テストを見て‹/›

出力：

この段落には、非常に長い単語があります：iamsooooooooooooooooooooooooooooooooooooolongggggggggggggggg.long この単語は折れ字になり、次の行に折り返されます。

CSSカウンタ CSS white-space(スペース)