どもです。
お久しぶりの餅。です。

昨晩、帰宅しようとしたら会社前の道路が川になっていました。
台風や水害とは縁遠い内陸民ですが、昨日ばかりは笑い転げながら帰宅しました。

さて、最近すっかりネタが不足してブログの更新も止まっていたのですが…

今更ながらCMSやレスポンシブに便利なCSSの情報を仕入れたので晒しておきます。

CMSサイト故に<li>の内容が可変だったり、
レスポンシブサイトでサイトの長さが可変だったりして、
並べたinline要素やinline-block要素が望まぬところで折れてしまう、
なんてことありますよね。

具体的にはこんな感じで。

これを手っ取り早く解決するCSSがありました。

word-break:keep-all

です。

これは行中の改行を指定するCSSで、
break-all以外を設定すると日本語でも改行が単語区切りになります。
上図のようなリストは1単語扱いされることが殆どなので、
floatで横幅を指定しなくとも無事に横並べが可能になります。

また、これと似た効果を持つCSSにword-wrapがありますが、
こちらは日本語には対応していないそうなので注意が必要です。
英単語のみで、長い英単語の文章中の改行を防ぐためのCSSのようです。