Question

I built a listview using jquery mobile. However, I would like to have a little more body text than what fits on a typical mobile screen.

<article id="military_list">
<ul data-role="listview" data-inset="true">
        <li><a href="barracks">
            <img src="../img/structure/barracks.png"/>
            <h3>Barracks</h3>
            <p>Fearless fighters weilding with shield and sword</p>
    </a></li>
            <li><a href="mage">
            <img src="../img/structure/mage.png"/>
            <h3>Mage Quarters</h3>
            <p>Where magical folk live</p>
    </a></li>
        </ul></article>

It takes the <p></p> tag and abbreviates it automatically. Is there a way to instead simply jump down a line? There appears to be a lot of space left over in the

block.

Heres an example:

As you can see in the yellow area, it cuts off the string and adds ‘grant you…’ rather than going to the next line.

Answer 1

Use this css:

.ui-li-desc {
    white-space: normal !important;
}

Here’s an example: http://jsfiddle.net/Gajotres/3ZVeN/