WEB系キャンパス

スマホページ内のURLのせいで、レイアウトが崩れた時はword-wrapプロパティ

ブログ記事とかでURLのような長い英語のテキストがある場合、スマホで表示させると
コンテンツを突き破って、表示される。ただ突き破るだけならまだしも、スクロールできてしまうから、スマホでスクロールすると、そのコンテンツだけカクカクしてしまう。
そんな時はbodyにword-wrapプロパティの「break-word」を指定しおけば、英語も途中で改行される。
スマホ対応させたページなら、ほぼ必須かも。

word-wrap:break-word;

ただし、table内はword-wrap:break-word;が効かないので、以下のコード

table {
  table-layout:fixed;
}

テーブルが均等に表示されるので、table項目によって文字数の差がある場合は少々バランスが悪くなる。

word-break:break-all;とほぼ同じ効果を得たいならこっちのほうが良いかも。

table {
  word-break:break-all;
}

Comment Form