ど素人から毛を生やす。<延>

CMSやレスポンシブサイトで押さえときたい「word-break」

Web > css 2014年8月6日(最終更新:3年前)

このページは2014.8.6に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

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

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

 

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

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

 

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

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

h260806

 

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

word-break:keep-all

です。

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

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

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)