jQuery Mobileのヘッダーのオーバーフローを考慮したアイコンを作成しますか？

Question

私の質問は、尋ねられた質問に似ていますhereしかし、私はもっと嫌なことになっていて、その答えには満足していませんでした。

私はjQueryモバイルで作業していますが、ヘッダー内の一部のタイトルが長すぎるため、追加したボタンに合わせることができず、楕円になってしまいます。ボタンにアイコンがあるときに、正しくトリミングする必要がある長さをかなり計算していないことを除いて、私はそれで全く問題ありません。アイコンの付いたボタンは、タイトルの冒頭と少し重なっています。

私はそのことを明確に説明しているかどうか分かりません。ここに写真があります（少し歪んでいるように見えますが、まだ私が話していることを示しています）。

これは「良い」バージョンです。タイトルテキストは楕円でうまく切り取られ、2つのボタンの間に収まります。このバージョンで

、しかし、ボタンの間のスペースの量が左側にあるため、アイコンの誤算と左ボタン、テキストを重なっています。

​​

私はアイコンを使用して重複がないように、私はボタンの間にあるテキストの長さを修正することができますJavaScriptやCSSのいずれかによる方法はありますか？または、アイコンを持っているか重複していないとトレードオフする必要がありますか？

Answer 1

次のCSS

.ui-header .ui-title{ 
    margin-left:110px; 
    margin-right:80px; 
} 

を使用することができ、私はそれがplacement.Youがそれをスキップするか、それが必要とされていない場合は、それを編集することができ、省略記号にはいくつかの調整が必要であると感じたので、私は余裕-正しい値を変更しました。

デモ - http://jsfiddle.net/YL8Ah/