Jquery mobile jquery listview链接切断正文

我使用jquery mobile构建了一个listview。然而，我希望有一个比典型的移动屏幕上更合适的正文

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

它接受标记并自动将其缩写。有没有办法简单地跳过一条线？块中似乎还有很多剩余空间

举个例子：

正如您在黄色区域中所看到的，它将删除字符串并添加“grant you…”，而不是转到下一行。

使用此css：

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

下面是一个示例：

使用此css：

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

---

这里有一个例子：

你可以发布一个提到这个问题的截图吗？@TolisEmmanouilidis添加了一个图像来帮助查看我在说什么。你可以发布一个提到这个问题的截图吗？@TolisEmmanouilidis添加了一个图像来帮助查看我在说什么。