Решение не сложно, но это также непросто.
Чтобы получить заголовок, чтобы показать многоточие (что необходимо для некоторых остальных, чтобы убедиться, что оно занимает только одну строку), вы можете дать ему класс «однострочный». Чтобы получить тело, чтобы показать эллипсис, вы можете присвоить ему класс «авто-переполнение», но вам также нужно указать, сколько строк будет отображаться до его использования, используя стиль -webkit-line-clamp: N, где N - это номер линий. (Я нашел 4 строки, чтобы быть хорошими для размера шрифта по умолчанию, если у вас также есть однострочный заголовок, но вам, возможно, придется играть на игровой площадке на основе вашего размера.)
Значит, теперь разметка будет выглядеть что-то вроде
<article class="auto-paginate">
<p class="single-line"><b>Very very long title and message</b></p>
<p class="auto-overflow" style="-webkit-line-clamp: 4">
Donec luctus erat sit amet odio tempus posuere. Nullam eu est nunc. Integer et metus quis augue ornare pharetra. Morbi pellentesque semper erat, at ultrices purus vulputate scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla aliquam lorem non feugiat laoreet. Aenean adipiscing ante ligula, in dictum magna fermentum nec. Sed sed malesuada lacus. Donec accumsan congue magna, ac tempus diam venenatis non. Sed sed rhoncus libero. Sed lorem dui, pellentesque quis posuere vehicula, cursus vitae erat. Donec porta imperdiet leo, ut sagittis elit gravida in. Sed mauris erat, feugiat non neque eget, accumsan tempus tortor. Mauris pulvinar mi id mattis condimentum. Donec nec consectetur ipsum, eu viverra nisl. Donec et eleifend sem, id vehicula augue.
</p>
<article>
Проблема с этим, однако, заключается в том, что у нас больше нет автоматического разбиения на страницы. У нас есть усеченный текст.
Для решения этой проблемы нам понадобится обложка с усеченным текстом и многоточием, а также карта с автопалограммами, содержащая весь текст. GMail Glassware делает эти два немного разных, и хотя мы можем сделать их похожими, мы примем этот стиль, а также опустив заголовок из той части, которая прокручивается. Карточка покрытия должна будет указать класс «только для обложки», а часть без крышки опустит классы «однострочный» и «автоматически переполненный». Так что это выглядело бы как-то как
<article class="cover-only">
<section>
<p class="single-line"><b>Very very long title and message</b></p>
<p class="auto-overflow" style="-webkit-line-clamp: 4">
Donec luctus erat sit amet odio tempus posuere. Nullam eu est nunc. Integer et metus quis augue ornare pharetra. Morbi pellentesque semper erat, at ultrices purus vulputate scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla aliquam lorem non feugiat laoreet. Aenean adipiscing ante ligula, in dictum magna fermentum nec. Sed sed malesuada lacus. Donec accumsan congue magna, ac tempus diam venenatis non. Sed sed rhoncus libero. Sed lorem dui, pellentesque quis posuere vehicula, cursus vitae erat. Donec porta imperdiet leo, ut sagittis elit gravida in. Sed mauris erat, feugiat non neque eget, accumsan tempus tortor. Mauris pulvinar mi id mattis condimentum. Donec nec consectetur ipsum, eu viverra nisl. Donec et eleifend sem, id vehicula augue.
</p>
</section>
</article>
<article class="auto-paginate">
<p>
Donec luctus erat sit amet odio tempus posuere. Nullam eu est nunc. Integer et metus quis augue ornare pharetra. Morbi pellentesque semper erat, at ultrices purus vulputate scelerisque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla aliquam lorem non feugiat laoreet. Aenean adipiscing ante ligula, in dictum magna fermentum nec. Sed sed malesuada lacus. Donec accumsan congue magna, ac tempus diam venenatis non. Sed sed rhoncus libero. Sed lorem dui, pellentesque quis posuere vehicula, cursus vitae erat. Donec porta imperdiet leo, ut sagittis elit gravida in. Sed mauris erat, feugiat non neque eget, accumsan tempus tortor. Mauris pulvinar mi id mattis condimentum. Donec nec consectetur ipsum, eu viverra nisl. Donec et eleifend sem, id vehicula augue.
</p>
</article>