CSSを利用して任意の箇所に改行を入れる

スマートフォン向けのサイトで、h1要素の両左右にボタンがついているヘッダを作りたいということがあります。
そんな状況の時に、h1の１行が長くてテキストがボタンの後ろに隠れてしまうということがよく起こります。
スマートフォンは縦表示時の横幅のサイズが小さいために起こりがちなことなのですが。
こんな状況の時に使える、任意の位置で改行するための小技です。

ソースコード

<header>
<h1>解像度の大きいデバイスでは<span>１行で表示したい要素</span></h1>
<div>ボタン左</div>
<div>ボタン右</div>
</header>

header h1 span:before {
  content: "\A";
  white-space: pre;
}

ここで重要なのはCSSの方。 h1の子要素spanの前に改行コードを追加してます。
これだけだと見た目上は改行されないので、更に white-space: pre; を記述することで改行を有効にしてます。 （HTMLのpre要素のように扱われるみたいですね）
スクリーンサイズごとに改行されるかどうかを決定したいなら、メディアクエリで特定スクリーンサイズまでは改行するようにしてあげればいいでしょう。

@media screen and (max-width: 320px) {
  header h1 span:before {
    content: "\A";
    white-space: pre;
  }
}

この例では、スクリーンサイズが320px以下（iPhoneなど）では改行するようにしてます。
なお、例ではspan要素を使っているが、この要素がstrongやemでも結果は変わりません。
また、この方法はbr要素を挿入するわけではない点に注意が必要です。

こっちの方がお手軽ではあるんだけど…

<header><br /><h1>解像度の大きいデバイスでは＜br /＞１行で表示したい要素</h1>
<div>ボタン左</div>
<div>ボタン右</div>
</header>

※注：br要素のかっこを２バイト文字で書いてますが、ブログではHTMLタグとして扱われるため回避のためにこのように記述してます

@media screen and (min-width: 360px) {
  header h1 br {
    display: none;
  }
}

方法としてはお手軽。視覚的にもわかりやすいですね。
あとはメディアクエリーなんかで、ある一定以上の解像度になったらbr要素を非表示にでもしてあげれればいいように思います。
ただ、個人的にはあんまり好きじゃないです。
文節の途中で改行がかかってるように見えるし、これだとbr要素でコードを汚してしまっているように見えてしまいます。
例えばh1の文章が変更になったとすると、br要素の位置を変更しなければならなくなるし、ちょっとメンテナンス性が悪くなる気がします。

参考資料

futuremix:CSS の content で改行する方法