2013-02-26 14 views
5

Jak mogę wymusić, aby nagłówek był widoczny, a tekst poniżej przepełnił elipsę? Nie mogę uruchomić go z elementem listy BlackBerry, gdy strona jest szersza niż 768px.Przepełnienie jQuery Mobile z li-desc

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

+0

Masz na myśli przepełnienie tekstu na elipsę, czy nie? ponieważ na jsfiddle w przepływy do elipsy. Popraw mnie, jeśli się mylę. – Omar

+0

Tekst przepełnia się na elipsę na mniejszej wersji, ale po przeciągnięciu do szerokości 768 pikseli nie jest już potrzebny. – Iammesol

Odpowiedz

3

Dodaj white-space: nowrap; do bloku Opis:

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

Zobacz zaktualizowaną jsFiddle.

+0

Dzięki! Czy jest jakikolwiek sposób, aby wypuścić go kilka linii w dół, zanim stanie się elipsą? Chyba określ wysokość? – Iammesol

+1

Nie sądzę, że nie możesz sam w css. (white-space: nowrap oznacza NIE WRACAJĄCEGO!): P – gtgaxiola

+0

To wyjaśnia. Dzięki chłopaki! – Iammesol