如何在玻璃自动分页卡中添加省略号？
如何在玻璃自动分页卡中添加省略号？
提问于 2014-02-07 20:41:09
https://developers.google.com/glass/develop/mirror/timeline#paginating的“玻璃开发人员指南”页面指出，您可以使用以下内容创建自动分页卡
<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使用省略号(.)在第一页的末尾，指示“读得更多”是可用的，但是自动分页类不会自动生成这一点。在文章标记中添加text-overflow: ellipsis样式也不起作用。
我们如何复制页尾的省略号以表示有更多的省略号？
Stack Overflow用户
回答已采纳
发布于 2014-02-07 20:41:09
解决方案并不难，但也不是简单明了的。
为了获得显示省略号的标题(对于其他部分来说，这是必需的，以确保它只需要一行)，您可以给它类“单行”。要让正文显示省略号，可以给它类“自动溢出”，但在使用样式-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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21637353
复制相关文章
相似问题
腾讯云开发者
