cssでの縦書き設定がiphoneで効かないとき

こんにちは茨城県水戸市でホームページ制作・コーディング業務を承っています。フリーランスのレターズです。

今日はcssで縦書き設定してルンルンしていたら、あれ手持ちのiphoneじゃ効いていないなとなりまして。そういえばそうだった思い出し、下記を設定で解決。

Before

<td class="course">ここに縦書きにしたい文字</td>

 .course {
       white-space: pre;
                writing-mode: vertical-rl;
                display: inline-block;
    }

これだと、普通にブラウザではいけるんですが、iphoneではダメでした。

After

<td class="course"><span>ここに縦書きにしたい文字</span></td>

 .course span {
       white-space: pre;
                writing-mode: vertical-rl;
                display: inline-block;
    }

縦書きにした文字をspanで囲って、それにcssをあてることで解決しました。

ちなみに　white-space: pre;　が入っていないと、サファリなどでは意図した高さにならず、途中で改行されたりします。