cssで縦書きを設定したらiPhoneで見たとき潰れて表示されてしまいました。どうやら高さを指定しないとダメみたいですね。 とは言え、文字数は変化するので値を決め打ちできません。
縦書き2行でbrタグで区切るというルールだったので、下記のようなjQueryを書いて対応しました。 brタグの前後の文字数を取得し、多いほうの文字数に26をかけて、高さとして設定しています。
例えばbrタグの前が6文字で後が8文字だった場合、要素に対して高さ208px（8×26=208）を設定します。
26は余白を含めた1文字あたりのおおよそのサイズです。この値は設定したフォントサイズによって異なります。

(function($) {
//縦書きの高さを任意に設定する
$('.title').each( function() {
getLen = $(this).find('h2').html().split('
');
for (var i = 0; i <= getLen.length -1; i++) {
result = getLen[i];
}
spLeft = getLen[0].length;
spRight = getLen[1].length;
if (spLeft >= spRight) {
//左のほうが多い、または同じ
textH = 26 * spLeft;
} else {
//右のほうが多い
textH = 26 * spRight;
}
//高さを設定する
$(this).outerHeight(textH);
});
})(jQuery);

仕様が明確になっているのでこれで対応できましたが汎用性はないですね。まぁとりあえず問題解決できたのでこれで良しとします。