修改 jQuery Mobile 以允许标题显示在省略号之前的 2 行上？答案

【问题标题】：Modifying jQuery Mobile to allow headings to display on 2 lines before the ellipsis?修改 jQuery Mobile 以允许标题显示在省略号之前的 2 行上？
【发布时间】：2011-12-09 12:50:24
【问题描述】：

我正在为一个项目尝试 jQuery Mobile，并正在构建一个列表。对于元素，我很想找到一种写入 2 行的方法，然后生成一个省略号。目前，省略号在一行之后生成，如下所示：

Lorem ipsum dolor sit amet, consectetur...

我想知道是否有相对可行的技术让它显示如下：

Lorem ipsum dolor sit amet，consectetur
adipiscing elit。菜豆...

我的 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;  
}

感谢您提供的任何提示。

【问题讨论】：

标签： css jquery-mobile

【解决方案1】：

我认为您可以将高度设置为相当于 2 行文本。将这两行添加到 ul-li-heading 的 css 中：

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

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

【讨论】：

恐怕不行，不过谢谢你的建议。