0

我正在使用 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....
    
  • 4

    1 回答 1

    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,因为它可能不起作用,因为classjQuery Mobile 经常覆盖。

    希望这可以帮助。让我知道这是否适合您。

    于 2012-09-13T09:02:39.923 回答