【CSS】レスポンシブデザインでテキストが折り返さなくて幅が変らない時。

なんだか初めてWEB屋っぽいホームページ製作の記事を書く気がしますｗ
今日は悩みに悩んで解決できた事を書きたいと思います。

最近では色んなデバイスに対応するためにレスポンシブWEBデザインで構築するホームページが多くなってきました。Googleも今月からアルゴリズムを変更してスマホ対応じゃないホームページの検索順位を大幅に下げると言っています。
https://sodicom.jp/blog/2015/02/27/create/483/

というわけでもはやモバイルユーザを無視するわけにはいかなくなりました。
Googleもレスポンシブデザインを推奨しています。
今後はレスポンシブデザイン+WordPressの組み合わせがしばらく安定になりそうです。

発生した問題

今回は私はtableタグでこの問題に引っかかりました。
幅を300pxにしたときに表内のテキストが折り返さなくて410pxから下に行かないという問題です。
他のCSSと干渉しているのかと思い全て見直しましたが他にtable内のwidthに干渉するようなコードはありません。
ひょっとしてリンクだからaタグが作用しているのかと思いましたが、関係なさそうです。

半角英数のみの文

結果から言うと原因は「半角英数のみで書いた文章」でした。
どういうことかというと。
「qwertyuiopasdfghjkl」という半角英数のみの文章だと幅指定が無視されて自動で改行されなくなります。

どうやらこれは英語圏のホームページに向けて作られたHTMLの仕様のようです。
英文が途中で改行されてしまうと他の意味になったりするため存在するみたいです。

幅指定が無視されてしまうので文字列の幅が優先されてしまいます。

幅指定を優先させるには?

幅指定を優先させるには以下のタグを使います。
「word-break: break-all;」

このタグを使うと、半角英数字のみでも幅指定を優先してくれます。

今までこんな問題には遭遇した事ありませんでしたが、今後は気をつけてみようと思います。