jQuery Mobile溢出的li-desc

时间:2013-02-26 15:53:21

标签: jquery-mobile responsive-design overflow

如何强制标题可见,下面的文字会溢出到省略号?当页面宽度超过768px时,我无法使用BlackBerry列表项。

http://jsfiddle.net/TeNXG/14/

<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 -->

1 个答案:

答案 0 :(得分:3)

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

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

请参阅更新后的jsFiddle