修改jQuery Mobile，允许标题在省略号前两行显示

Question

我正在尝试jQuery移动一个项目，我正在构建一个列表。对于元素，我希望找到一种方法将其写入2行，然后生成省略号。目前，省略号在一行之后生成，如下所示:

爱你，爱你，爱你，爱你。

我想知道是否有一种相对可行的技术可以让它像这样显示:

Lorem ipsum dolor sit met, consecteter
adipiscing elite。Phasellus pretium…

我的HTML如下:

<ul data-role="listview">
  <li>
    <a href="#">
      <img src="images/thumbs/sample_photo.jpg" width="300" height="225" alt="Sample Photo">
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium consectetur.</h3>
      <p>Vestibulum risus mi, eleifend quis gravida.</p>
    </a>
  </li>
</ul>

jQuery Mobile的元素CSS如下:

ui-li-heading { 
  font-size: 16px; 
  font-weight: bold; 
  display: block; 
  margin: .6em 0; 
  text-overflow: ellipsis; 
  overflow: hidden; 
  white-space: nowrap;  
}

谢谢你的建议。

Answer 1

我认为你可以将高度设置为相当于2行文本。将以下两行添加到ul-li-heading:

的css中

    height: 32px; // font-size * 2
    display: block; // just to be sure

当然，将它与上面的原始CSS结合起来。