« 金環食バブル | トップページ | なんでもスライドアニメーション効果、jQueryでカルーセル「carouFredSel」がすごいよ »

2012年4月 9日 (月曜日)

連続した英数字も改行させる

 CSSの話。英数字が連続していると改行されず、意図しない感じではみ出しちゃったりする。それを解除剃る方法があったよなあ。

 結論。

  word-break: break-all;

 だそうだ。これで単語の途中でも改行されるようになる。せまいところにつめこもうとした場合には有効そう。意味よりも見た目重視の場合とか。

 半角英数字の文字列を折り返す:CSS小技半角英数字の文字列を折り返す:CSS小技はてなブックマーク - 半角英数字の文字列を折り返す:CSS小技

 いつも忘れて検索するはめになる。忘れないようにメモ。

 さらに調べるとword-wrapという似たようなものもあるという。

word-breakプロパティとword-wrapプロパティの違い - CSSデザインノートword-breakプロパティとword-wrapプロパティの違い - CSSデザインノートはてなブックマーク - word-breakプロパティとword-wrapプロパティの違い - CSSデザインノート

 ブラウザによって効果が異なるという。ややこしい。

 とりあえず、両方入れとくとか? わからん。

 上記サイトには、両者の違いもちゃんと書かれてる。

改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効 - CSSデザインノート改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効 - CSSデザインノートはてなブックマーク - 改行をコントロールするword-wrapプロパティは主要の最新ブラウザで有効 - CSSデザインノート

 ついでに回りこみ解除の方法についてもメモしておこう。同じサイトに詳細が。

決定版!?Clearfixのソースコードはここまで短くなった - CSSデザインノート決定版!?Clearfixのソースコードはここまで短くなった - CSSデザインノートはてなブックマーク - 決定版!?Clearfixのソースコードはここまで短くなった - CSSデザインノート

(追記 2012/04/20)

 Firefoxではbreak-allが効かないそうだ。あとでまた書く。


|

« 金環食バブル | トップページ | なんでもスライドアニメーション効果、jQueryでカルーセル「carouFredSel」がすごいよ »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/54429837

この記事へのトラックバック一覧です: 連続した英数字も改行させる:

» 連続した英数字も改行させる の続き。Firefoxではだめだそうだ [point of view point]
 英数字で改行されずにはみだしちゃったりするので、調べたうえで前にこんなのを書いた。  連続した英数字も改行させる  なんとか問題は解決。と思ってたのだけど。その後。Firefoxで問題が解決されていなことに気づく。  Firefoxでは、word-break、word-wrapでも英数字が連続する場合は改行してくれないそうだ。  自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。 | 乱雑モッ... [続きを読む]

受信: 2012年4月20日 (金曜日) 午後 07時12分

« 金環食バブル | トップページ | なんでもスライドアニメーション効果、jQueryでカルーセル「carouFredSel」がすごいよ »