5

見出しを強制的に表示し、下のテキストが省略記号にオーバーフローするようにするにはどうすればよいですか? ページの幅が 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 -->

4

1 に答える 1

3

white-space: nowrap;説明ブロックに追加:

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

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

于 2013-02-26T16:56:38.947 に答える