Модифицируете jQuery Mobile, чтобы заголовки отображались в 2 строки перед многоточием?

Question

Я пробую jQuery Mobile для проекта и создаю список. Для элемента я хотел бы найти способ написать в 2 строки, а затем сгенерировать многоточие. В настоящее время многоточие генерируется после одной строки, например:

Lorem ipsum dolor sit amet, concectetur ...

Я хотел бы знать, существует ли относительно выполнимая методика отображения, например:

Lorem Ipsum Dolor Sit Amet, Заклинатель
Adipiscing Elit. 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>

CSS jQuery Mobile для элемента выглядит следующим образом:

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 строкам текста. Добавьте эти две строки в css для ul-li-heading:

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

Конечно, комбинируйте это с вашим оригинальным CSS выше.