jQuery Mobile でヘッダーの文字の省略を解除する

jQuery Mobile で作ったヘッダーに10文字くらいの文字列が入ると、”…” のように勝手に省略されてしまう。

画面の狭いスマートフォン向けとしては理にかなった表現なのかもしれないが、それを全部表示させたい場合。

解決策

「テキストを省略せずに表示する」に解除する CSS が載っているので使わせてもらう。

スタイルの上書きで解決するので、少なくとも jQuery Mobile の読み込みの後に読み込ませるようにします。

引用

/* テキストを省略せずに表示する */
.ui-header .ui-title, /* ヘッダー */
.ui-footer .ui-title, /* フッター */
.ui-btn-inner, /* ボタン */
.ui-li-heading, /* リスト見出し */
.ui-li .ui-btn-text a.ui-link-inherit, /* リンクリスト */
.ui-li-desc /* リスト詳細 */ {
  overflow: visible;
  white-space: normal;
}

シェアする

  • このエントリーをはてなブックマークに追加

フォローする