Jqueryモバイルヘッダーリンクが長いテキストと重なっています


Answers

これはstackoverflowで議論されています。 次のリンクは、長い文字列を切り捨てるためのさまざまな戦略を示しています。

CSSで長い文字列を切り詰める:まだ実行可能?

Question

私はちょうどjqueryモバイルアプリケーションの作業を開始し、リンクを使用するときにヘッダーバーに問題が発生しています。

  <header data-role="header" data-position="fixed">
    <a href="blah" data-icon="back">this is long text</a>
    <h1>page title</h1>
  </header>

問題は、どちらか一方または両方が少し長い場合、バックリンクがタイトルと重複することが多いことです。 これは明らかに、スクリーンが小さい(iPad対)モバイルデバイス上のビュー、またはテストブラウザを縮小した場合にのみ発生します。 しかし、より広範なブラウザーでテストするとうまくいくように見えます。 この作業を行うためにjqueryで構築されたものはありますか? テキストのサイズを縮小するか、幅に応じてテキストを自動的に切り捨てるか? テキストを自分自身で切り捨てることはできますが、より広いブラウザ(またはランドスケープモード)で見ると愚かに見え、リンクは何の理由もなく切り捨てられます。

どんな助けも素晴らしいだろう。 ありがとう!

更新:

これはhttp://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-headers.htmlにアクセスしてテストできます

Firebug / Inspectorを使用すると、ツールバーのリンクのテキストを長くし、ブラウザーの幅が狭いときに見出しを重複させることができます。