jQuery Mobile overflow of li-desc

Question

How can I force the heading to be visible, and the text below overflow into ellipsis? I can't get it to work with the BlackBerry list item when the page is wider than 768px.

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

Answer 1

Add white-space: nowrap; to the description block:

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

See the updated jsFiddle.