Question

https://developers.google.com/glass/develop/mirror/timeline#paginating上的Glass开发者指南页面表明您可以使用类似

的内容创建自动分页卡

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

这将创建一张卡片，在点击时，提供“阅读更多”选项，可让您在多张卡片之间滚动。但主卡上没有迹象表明还有更多要阅读的内容。 GMail Glassware在第一页末尾使用省略号（...）表示“Read More”可用，但auto-paginate类不会自动生成此值。向文章标记添加text-overflow: ellipsis样式也不起作用。

我们如何在页面末尾复制省略号以表明还有更多？

Answer 1

解决方案并不困难，但也不简单。

要使标题显示省略号（其余部分是必需的，以确保它只需要一行），您可以将其命名为“单行”。要让主体显示省略号，您可以为其指定“自动溢出”类，但您还需要指定在使用样式-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玻璃器皿使两者略有不同，虽然我们可以使它们看起来几乎相同，但我们也会采用这种风格，省略滚动部分的标题。封面卡需要指定“仅限封面”类，而非封面部分将省略“单行”和“自动溢出”类。所以这看起来像

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

如何在Glass自动分页卡中添加省略号？

1 个答案: