ui-scroll listviewは、画面の右端を切り抜いて開きます

Question

私はhtmlとjavascriptを使ってアプリケーションを開発しています。私は1ページにui-scrolllistviewを持っています。しかし、単語がリストビューには大きすぎると、それは単に画面の幅を広げて画面外に出ます。

ui-scrolllistviewの右端を切り落とさないように、単語または単語の長さをui-scrolllistview内で設定する方法はありますか？

おかげ

EDITここ

は、私はあなたがおそらくtext-overflowとwhite-spaceと探しているように聞こえると信じ

<div data-role="page" data-theme="f" id="choose-building"> 

    <div data-role="header" data-theme="f" data-position="fixed" data-tap-toggle="false"> 
    <h1><img src="images/building.png" height="80px"></h1> 
     <div data-role="controlgroup" class="ui-btn-right topzero"> 
     <a href="#" data-rel="back" data-role="button" data-inline="true" data-direction="reverse">Back</a> 
     <a id="applyFilter" data-role="button" data-inline="true" onClick="pickedBuildings();">Chosen Buildings</a> 
     </div> 
    </div> 

    <div data-role="content" data-scroll="Y" class="ui-scrolllistview" > 
     <form> 

     <div data-role="fieldcontain">   

      <fieldset data-role="controlgroup" id="CatagoryChooseBuilding" > 
      </fieldset> 

     </div> 
     </form> 
    </div> 
    <div data-role="footer" data-theme="f" data-position="inline" data-id="main-footer" data-tap-toggle="false"> 
     <div data-role="navbar" > 
     <ul> 
      <li><a href="#home" data-role="button" data-icon="myapp-home" >Home</a></li> 
      <li><a href="#page-map" data-role="button" data-icon="myapp-building-a" >Buildings</a></li> 
      <li><a href="#more" data-role="button" data-icon="myapp-more" >More</a></li> 
     </ul> 
     </div><!-- /navbar --> 
    </div><!-- /footer --> 
</div> 

Answer 1

UI-scrolllistでページを作成している私のコードですoverflow。

あなたは、あなたのmarginsとpaddingを設定後に気になりどんな大きさでテキストを停止するように、これらの異なるCSSプロパティを使用することができます。

text-overflow: ellipsis; 
white-space: nowrap; 
overflow: hidden; 

編集：Example

あなたは、遠くあなたが希望としてスクロールバーからテキストをscootedするまでは、マージンのプロパティを調整することができます。

編集：あなたはフレームワーク（自分のタグに従ってjQueryのモバイル）は、あなたのテキストが含まれている最も内側の要素の上に、あなたのためにそれを切り捨てワードラップを許可したい場合は、overflow: visible;を指定し、white-space:normal;

期待どおりの動作変更が表示されない場合は、「開発者ツール」ウィンドウでページを表示してください。これらはChromeとIEに組み込まれており、Firebug for Firefoxを使用できます。これらは、あなたが期待している振る舞いを得るために必要なもののように聞こえる「オンザフライ」でのスタイルシートの変化をテストすることを可能にします。