jQuery Mobileで、ボタンのテキストを自動改行するようにする

こんな感じのjQuery Mobileを使ったサイトがあったとします。
button-test.cssは、自分で作成したcssファイルです。現時点で内容は空とします。

<! DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css">
    <link rel="stylesheet" href="css/button-test.css">
    <script src="js/jquery-1.8.2.min.js">
    </script>
    <script src="js/jquery.mobile-1.2.0.js">
    </script>
</head>
<body>
    <section id="index" data-role="page" data-title="test"   data-fullscreen="true">
        <header data-role="header">
            <h1>Button Test</h1>
        </header>

        <div data-role="content">
            <a href="#index" data-role="button">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほ</a>
        </div>
    </section>
</body>
</html>

ブラウザで表示すると、こんな感じ。
f:id:kuro_m88:20121112221631p:plain:w500
ウィンドウの幅(画面幅)を狭めていくと…
f:id:kuro_m88:20121112221937p:plain:w250
ボタンからはみ出た分の文字列が"..."で省略されてしまいました。
この挙動で困らない場合はこのままでいいのですが、自動で改行して残りも表示して欲しい時は、button-test.cssに

.ui-btn-inner {
    white-space: normal;
}

という記述を追加します。そうすると、こんな感じで自動で改行して表示してくれます。
f:id:kuro_m88:20121112222342p:plain:w250