このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2012.05.27

css3 word-break word-wrap 禁則処理について考える

まず、word-wrapとword-breakについて、

word-wrap

normal
単語の途中で改行はしません。この場合、必要に応じて表示範囲を拡大します。(デフォルト)
break-word
必要に応じて単語の途中で改行します。

word-break

normal
CJKは厳格に改行制限される、非CJKはそれら自身のルールに従って改行される(初期値)
keep-all
CJKは改行しない、非CSKはnormalと同じ(keep-allは、韓国語のようにホワイトスペースの存在が改行のきっかけとなる場合にのみ使用するべき値)
loose
CJKはより緩やかな改行制限となる、非CSKはnormalと同様
break-strict
CJKはnormalと同様、非CJKはどこでも改行できる(break-strictは、CJK文字が中心で非CJKの抜粋をわずかに含むようなテキストを、それぞれの行に均等に分布させたいときに使用されることがほとんど)
break-all
CJKはlooseと同様、非CJKはbreak-strictと同様

との事です。こちらを参考しております。

CSS3リファレンス

http://www.htmq.com/css3/word-break.shtml

うん。難しいですね。(笑)

一つずつ解説を。

word-wrap

うーん。違いが分かりませんね。

word-break

word-breakに関しては違いが現れます。

normalだと文法を考慮し改行されます。break-allだと文法を考慮せず、文字いっぱい表示し、改行されます。

基本、ホワイトスペースをきっかけに改行するかしないか。を判断します。

では、ここから現場であった事を、

まず、以下のような(デザインは全くちがいますが)ボタンがあるとします。

文字が2行になる可能性があるので、対応して欲しい。つまり2行になった時

このような形になればいいのですが、普通に組むと無理があるので、

display: table-cell;を指定し、vertical-align:middle;にしました。

すると、2行になった場合上のようないい感じになるのですが、問題が

文字が増えたとき、溢れ出します。

よって、word-break:break-all;を指定。

テキストが収まってくれます。

良かった。と思いますが、今度は

改行される部分がここでは、問題がある!

となりました。

確かに問題ですが。ほぼ詰みました。(笑)

どちらかを選択しないといけないですよねー。

また、word-wrap: break-word;を指定すると、

word-wrap: break-word;

ホワイトスペースで改行されるのですが、文字が増えた場合やっぱりはみ出します。。

また、word-break: keep-all;も同様でした。

適切なのは、word-break:break-all;を指定し、改行(br)を含めれる。

ということに落ち着きました。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。