リストを横並びにしたときに、単語ごとに折り返すCSSプロパティ(IE用) - グレヌデサ La graine du dessin
Coding

リストを横並びにしたときに、単語ごとに折り返すCSSプロパティ(IE用)

フッターリンクなどで、リストを横並びにした際
丁度折り返す所でくずれているか、「display:inline」を使用して単語の途中でも折り返すか・・・。
「display:table」を使用しても、safariで崩れたり、対応していないブラウザが存在するので、使えません。

IEさえちゃんと表示されれば「float」だけで済むのに・・・><

と思っていましたが、ちゃんと単語ごとで折り返してくれるCSSプロパティがありました。
このプロパティはIEのみ対応しています。


word-break: nomal;
英語などの半角英数文字列は単語の切れ目で折り返され
日本語などの全角文字列は、単語の途中でも表示範囲にて折り返す。

word-break: break-all;
文字列や言語に関係なく、設定された表示範囲で折り返す。(単語の途中でも)

word-break: keep-all;
文字列や言語に関係なく、単語の切れ目で折り返す。

----------------------------------------------------------------------------------------------------------
結局は単語ごとに折り返すword-break: keep-all;しか使わないとは思いますが・・・。
半角スペース、全角スペースを単語の間に入れると折り返してしまうので注意です。

New Entries
TOP
Old Entries

Webトレンド情報局とは

クリエイティブグループスタッフがお送りする、Webデザイナーのための知識とTIPS。 PhotoShopの便利な豆知識や、CSSのお困り解決、デザイン概論などなど。
【隔週木曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive


Warning: MagpieRSS: Failed to fetch http://lab.gpol.co.jp/trend/atom.xml and cache is off in /usr/home/aa218u55sc/html/magpierss/rss_fetch.inc on line 240

Warning: Invalid argument supplied for foreach() in /usr/home/aa218u55sc/html/graine/footerrss.php on line 36

Warning: MagpieRSS: Failed to fetch http://lab.gpol.co.jp/tsubo/atom.xml and cache is off in /usr/home/aa218u55sc/html/magpierss/rss_fetch.inc on line 240

Warning: Invalid argument supplied for foreach() in /usr/home/aa218u55sc/html/graine/footerrss.php on line 36

Warning: MagpieRSS: Failed to parse RSS file. (Mismatched tag at line 89, column 8) in /usr/home/aa218u55sc/html/magpierss/rss_fetch.inc on line 240

Warning: Invalid argument supplied for foreach() in /usr/home/aa218u55sc/html/graine/footerrss.php on line 36