2013-02-26 11 views
5

見出しを強制的に表示させ、下のテキストを省略記号にオーバーフローさせますか?ページが768pxよりも広い場合は、BlackBerryリスト項目を使用することができません。li-descのjQueryモバイルオーバーフロー

​​

<div data-role="page" data-theme="a" id="demo-page" class="my-page" data-url="demo-page"> 
<div data-role="header"> 
    <h1>News</h1> 
    <a href="grid-listview.html" data-shadow="false" data-iconshadow="false" data-icon="arrow-l" data-iconpos="notext" data-rel="back" data-ajax="false">Back</a> 
</div><!-- /header --> 
<div data-role="content"> 
    <ul data-role="listview"> 
     <li><a href="#"> 
      <img src="http://view.jquerymobile.com/master/docs/_assets/img/apple.png"> 
      <h2>iOS 6.1</h2> 
      <p>Apple released iOS 6.1</p> 
      <p class="ui-li-aside">iOS</p> 
     </a></li> 
     <li><a href="#"> 
      <img src="http://view.jquerymobile.com/master/docs/_assets/img/blackberry_10.png"> 
      <h2>BlackBerry 10</h2> 
      <p>BlackBerry launched the Z10 and Q10 with the new BB10 OS and more and stuff and lots of stuff and overflowing and stuff and wow so much text man holy mess even more let's see just how jacked we can make this div</p> 
      <p class="ui-li-aside">BlackBerry</p> 
     </a></li> 
    </ul> 
</div><!-- /content --> 
<div data-role="footer" data-theme="none"> 
    <h3>Responsive Grid Listview</h3> 
</div><!-- /footer --> 

+0

テキストが省略記号にあふれているかどうかを確認しますか?なぜなら、jsfiddleでは省略記号が流れるからです。私が間違っていれば私を修正してください。 – Omar

+0

テキストが小さいバージョンでは省略記号にオーバーフローしますが、768px幅にドラッグするとテキストは表示されなくなります。 – Iammesol

答えて

3

記述ブロックにwhite-space: nowrap;を追加します。

ui-listview .ui-li-desc { 
    white-space: nowrap; 
    overflow: visible; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

が更新jsFiddleを参照してください。

+0

ありがとう!省略記号になる前にいくつかの行を表示する方法はありますか?私は高さを指定すると思いますか? – Iammesol

+1

私はあなただけではできないと思います。 (ホワイトスペース:ラップはラッピングなしを意味します):P – gtgaxiola

+0

それはそれを説明しています。みんなありがとう! – Iammesol

関連する問題