WordPressの表で任意改行位置を指定する

最近のウェブサイトでは、パソコンでもスマホでも機器に応じてレイアウトが自動調整されるデザインを良く見かけます。
それをレスポンシブデザインと呼ぶらしいのですが、困ったことになりやすいのが表のレイアウトです。
スマホで表示すると列幅が乱れたり、テキストがはみ出したり。

先日、WordPressでウェブサイトを構築する際に表の改行位置についてものすごく困ったので、解決方法をメモしておきます。

改行の基本

まずは表における改行の基本をおさらいします。
通常は、テキストの長さが列の幅を超える場合、日本語の全角文字やハイフン、スペースなどで自動的に改行されます。
半角文字の場合は、環境によって改行されずにはみ出したり、列幅で改行されたりします。

例えば以下のようなテキストがあるとします。

• 1234567890abcdefghijklmnopqrstuvwxyz

このテキストへ、次の <改行> の位置に改行タグを入れて表示してみます。

• 12345<改行>67890<改行>abcdefg<改行>hijklmn<改行>opqrstu<改行>vwxyz

よく見る<br>は、列幅に関係なく強制的にその位置で改行します。
<wbr>は、必要な場合のみ改行されるタグで、1行に表示できる部分は改行されません。
&#8203;は幅の無いスペースなので見えませんが、存在はしているので改行位置として認識されます。
このブログサービス Blogger ではこれらのタグや記号を認識し、正確に改行できていますね。

困るのは、環境によってはこれらの改行法がうまくいかないケースがあることです。

Firefoxで<wbr>のような改行をさせる方法

ズバリこれです。
WordPressでウェブサイトを構築したとき、Firefoxは<wbr>を認識してくれませんでした。
Google Chrome では完璧にレスポンシブしてくれるのに、Firefox は知らんぷり。
（一応言っておきますが私はFirefox派です。）
ネットで調べて white-space:nowrap; とか word-wrap:break-word; とか試してみたけど上手くいかない…。自分だけか？

ということで鬼の形相でググった結果、解決しました。

1. CSSに以下を記述（WordPressなら style.css）

   
   .br_responsive {
     display: none;
   }
   
   @media only screen and (max-width: 640px) {
     .br_responsive {
       display: inline-block;
     }
   }
   

2. 改行したい位置には次のように記述

   
   <br class="br_responsive">
   

これでFirefoxでもChromeでも、必要な場合のみ改行されました。
説明のためにクラス名を br_responsive にしていますが、長いので適宜変更してください。
また、レスポンシブ対応する幅を 640px 以下にしていますが、これも必要に応じて変更してください。

brタグにも当然のごとくクラスを指定できるわけですが、そもそも思いつかなかったです。
「<br>=改行」が刷り込まれて頭が固くなっていました。
しかし…white-space:nowrap; とかが自分だけうまくいかないのは何故なんでしょう？