2011年7月13日水曜日

jQueryMobileのボタン内のテキストを改行

jQuery Mobile使うとスマートフォンっぽいUIにしてくれるのでまぁ便利なんだけど、微妙なところの調整が良く分からない。掲題の通りで、ボタン内のテキストを改行して全てを表示させたい。デフォルトだと「…」と省略されるので。

ぐぐるが、とくに解決方法みつけられないので、自力で頑張る。

.ui-btn-inner の 「white-space: nowrap;」が効いてるので折り返されないで表示されてる。
んで、ボタン内の文字列はspan.ui-btn-textに入れられるようなので、このスタイルを設定すればよさそう。

サンプル
    <style type="text/css">
    div.ws-normal span.ui-btn-text { white-space:normal; }
    div.ws-pre span.ui-btn-text { white-space:pre; }
    </style>
    <div data-role="content">
        <input type="button" value="ボタンの文字列長いと改行されずに省略されるのをなんとかしたい。">
        <div class="ws-normal">
            <input type="button" value="ボタンの文字列長いと改行されずに省略されるのをなんとかしたい。">
        </div>
        <div class="ws-pre">
            <input type="button" value="ボタンの文字列長いと
改行されずに省略されるのをなんとかしたい。">
        </div>
    </div>


とりあえず、改行はできましたっと。もっと良い方法もあるのかな。