2013-02-26 69 views
5

如何强制标题可见,下面的文本溢出到省略号中?当页面宽度超过768像素时,我无法使用BlackBerry列表项目。li-desc的jQuery Mobile溢出

​​

<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 2013-02-26 16:48:54

+0

文本溢出到较小版本的省略号中,但是当您将其拖动到768px宽时,它不再执行此操作。 – Iammesol 2013-02-26 18:41:01

回答

3

添加white-space: nowrap;的描述块:

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

查看更新jsFiddle

+0

谢谢!在省略号码之前,有没有什么可能的方法让它出现几行?我想指定一个高度? – Iammesol 2013-02-26 18:41:48

+1

我不认为你不能单独在CSS中。 (white-space:nowrap意思是没有包装!):P – gtgaxiola 2013-02-26 19:29:24

+0

这就解释了它。多谢你们! – Iammesol 2013-02-26 19:30:02