How can I add an ellipsis to a Glass auto-paginate card?

Question

The Glass Developer Guide page at https://developers.google.com/glass/develop/mirror/timeline#paginating indicates that you can create an auto-paginating card using something like

<article class="auto-paginate">
 <p><b>Very very long title and message</b></p>
 <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>

This will create a card that, when tapped, offers a "Read More" option which will let you scroll between multiple cards. But there is no indication on the main card that there is even more to read. The GMail Glassware uses an ellipsis (...) at the end of the first page to indicate that "Read More" is available, but the auto-paginate class doesn't automatically generate this. Adding a style of text-overflow: ellipsis to the article tag also doesn't work.

How can we duplicate the ellipsis at the end of a page to indicate there is more?

Answer 1

The solution isn't difficult, but it also isn't straightforward.

To get the title to show an ellipsis (which is necessary for some of the rest, to make sure it only takes one line), you can give it the class "single-line". To get the body to show the ellipsis, you can give it the class "auto-overflow", but you'll also need to specify how many lines will be displayed before it does so using a style -webkit-line-clamp: N where N is the number of lines. (I've found 4 lines to be good for the default font size if you also have a one-line title, but you may need to fiddle in the playground based on your size.)

So the markup now would look something like

<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>

The problem with this, however, is that we no longer really have auto-paginate. We have truncated text.

To resolve this, we'll need a cover card with the truncated text and ellipsis and an auto-paginate card that contains all the text. The GMail Glassware makes the two slightly different, and although we can make them look pretty much the same, we'll adopt that style as well by omitting the title from the part that scrolls. The cover card will need to specify the class "cover-only", and the non-cover portion would omit the "single-line" and "auto-overflow" classes. So this would look something like

<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>