HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


単語の途中の改行の処理を指定する

CSSの書き方

word-break:値 ;

CSSの詳細情報
プロパティ名 word-break 読み方 ワード・ブレイク
初期値 normal 意味 単語の改行調整
normal/break-all/keep-all
対象 すべての要素
CSSレベル IE独自 対応ブラウザ Windows MAC
継承 する IE 5.0以上 --

解説

文章中の単語の改行の処理を指定するスタイルシートです。単語が文章の途中で改行されてしまうと、読みにくくなってしまうことがありますが、これを回避することができます。「word-break」プロパティに対する値は3種類です。

不安定なプロパティ

「word-break」プロパティで設定できる値によっては、英数字と漢字などの改行の仕方が異なったり、「word-break」プロパティの内容が優先されて、要素の幅が自動的に伸張するといった現象が見られるため、使用頻度の低いプロパティです。具体的な挙動は以下の通りです。

英語等の改行方法 日本語の改行方法
normal 単語と単語の区切りで改行される 単語の途中でも、要素の幅によって改行されることもある
break-all 単語の途中でも、要素の幅によって改行されることもある 単語の途中でも、要素の幅によって改行されることもある
keep-all 単語と単語の区切りで改行される 単語と単語の区切りで改行される

※引用元:藤本 壱、スタイルシート ポケットリファレンス、技術評論社、P139、2005

IEのみ対応

InternetExplorer独自の仕様ですので、他のブラウザでは対応していません。なお、この「word-break」プロパティはCSSレベル3の「word-break-cjk」プロパティとほぼ同じ仕様だそうです。

CSS/HTMLサンプル

p { width:400px; word-break:keep-all; }

段落要素に対し単語の改行処理を指定 サンプル