Jquerymobile 列出缩略图格式

Question

我正在使用 jquerymobile 创建带有缩略图的列表。它看起来像这样：

<ul>
   <li>
      <h3>Heading</h3>
      <p>Long thumbnail which I want to be divided into 2 lines and not just simply cut with ... ending</p>
   </li>
</ul>

如果我在浏览器中查看它，一切都很好，但是当我将它加载到移动设备（当然屏幕更小）时，我的缩略图会被剪切。所以它看起来不像这个长缩略图......但我想显示整个缩略图并将其分成两行或多行。有没有办法做到这一点？

我里面也有这段代码

：

<p class="ui-li-aside"> Date or some text</p>

它在右侧显示日期

。同样，在网络浏览器上它看起来很棒，但在移动设备上它只是简单地削减了我，所以它看起来像 Headi.... 那么有没有办法将 ui-li-a 放在 li 的底部，这样它就会被组织成这样

HEADING 3
Thumbnail first line (probably divided into two lines)
Thumbnail Second line (if first line is not enough)
                                                       ul-li-aside(actual date)

现在它看起来像这样（在我的手机上）：

HEADI....       ul-li-aside(actual date)
Thumbnail firs....

Answer 1

您可以尝试在要显示整个文本的标签中包含style="white-space: normal;"。

所以你会：

<ul>
    <li>
        <h3 style="white-space: normal;">Heading</h3>
        <p style="white-space: normal;">Long thumbnail which I want to be divided into 2 lines and not just simply cut with ... ending</p>
    </li>
</ul>

PS：要包含white-space: normal，请在标签中使用style 属性，而不是class，因为它可能不起作用，因为class 经常被jQuery Mobile 覆盖.

希望这会有所帮助。让我知道这是否适合您。