« Android | メイン | NetService - ネットサービス »

2009年12月10日

CSS テキスト範囲内での自動折り返し

ショッピングサイト製作中に商品名が長いものが出てきた
範囲内で自動的に折り返すようにはしてあったんだけど
単語、またはスペースの部分で折り返すという指定だったため
単語が長くてスペースの無い商品名が出てきた場合にレイアウトが崩れた・・・

なので単語に関係なく範囲内でテキストを折り返してくれるよに
指定してみた

スタイルシート
word-break: break-all;

この指定で、単語の途中だろうと範囲内で折り返してくれる
しかーーーし!このCSSはIE限定でFireFoxやOperaは非対応
次の規格では対応するらしいけど現在はIE以外には使えない。

調べてみたら、Javascriptで強制的に
自動折り返しをクラス付けできるようにしてくれた人がいるみたいで
それを参考にさせてもらた

to-R
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
http://blog.webcreativepark.net/2008/09/14-211341.html

内容をみると分かるけど、tableタグでwordBreakをclass指定すると
強制的に「word-break: break-all;」の効果発動!

まーここで、1つ問題だったのがこれtableタグにしか使用できない
なので、tableの記述を指定のタグに変えれば他のタグでも使えるみたいです。

以上です。はい。

Copyright ©2009 wghost All Rights Reserved.