jQuery Mobileでヘッダが省略されるのを防ぐ

ヘッダに表示できる文字数はデフォルトだとかなり制限が厳しく、ちょっと文字数が増えただけで … で省略されてしまいます。

こんな感じで。

ヘッダが省略されている状態

改行して複数行で表示、という選択肢もありますが、ヘッダでそれをやると見苦しいので幅を広げてみました。ちなみにデフォルトは 30% です。

.ui-header .ui-title {
  margin-left: 15%;
  margin-right: 15%
}

省略されずに表示されました。

ヘッダが完全に表示されている状態

うちのブログではこれくらい広げても特に問題は起きませんでしたが、わざわざ制限しているくらいですから、ヘッダに配置するボタンの数や種類によっては問題になる可能性があります。どれくらい広げられるかは各自確認してください。

参考