AMP

amp-truncate-text

Experimental

Description

用省略号截断文本,可以选择显示一个溢出元素。

 

Required Scripts

<script async custom-element="amp-truncate-text" src="https://cdn.ampproject.org/v0/amp-truncate-text-0.1.js"></script>

使用省略号截断容器内的文本。

行为

用省略号截断文本,有溢出时可以选择显示一个溢出元素。溢出元素始终位于内容的末尾,并且必须是的直接子元素 <amp-truncate-text>

Children

slot="collapsed" 可选元素显示元素何时被截断的文本。单击此将展开元素。这必须是的直接子级amp-truncate-text.
slot="expanded" 可选元素,显示元素何时展开。单击此选项将在展开前将元素折叠为相同大小。这必须是的直接子级 amp-truncate-text
slot="persistent" 无论文本是否被截断,始终都会显示一个可选元素。这必须是的直接子级 amp-truncate-text.

用法

<amp-truncate-text layout="fixed" height="3em" width="20em">
  Some text that may get truncated.
  <button slot="collapsed">See more</button>
  <button slot="expanded">See less</button>
</amp-truncate-text>

自定义行为

如果不想在适当的位置展开,可以使用 slot="persistent" 执行自定义操作,比如导航到另一个带有附加信息的页面。当内容太多而无法进行内联扩展时,这将非常有用。

<amp-truncate-text layout="fixed-height" height="3em">
  Some text that may get truncated.
  <a href="some/url" slot="persistent">See more</a>
</amp-truncate-text>

您还可以通过使用锚标记或点击操作来使用 slot="collapsed" 来定制元素的操作。注意,如果文本匹配,这将不会显示。例如:

<amp-truncate-text layout="fixed-height" height="3em">
  Some text that may get truncated.
  <a href="some/url" slot="collapsed">See more</a>
</amp-truncate-text>

默认情况下,在具有 slot="expanded" 的元素中单击将折叠内容。就像 slot="collapsed" 一样,使用锚点标签或点击动作将允许您重写行为来做其他事情,比如链接到另一个页面。

<amp-truncate-text layout="fixed-height" height="3em">
  Some text that may get truncated.
  <button slot="collapsed">See more</button>
  <a href="some/url" slot="expanded">See even more</a>
</amp-truncate-text>

Validation

请参阅 AMP 验证工具规范中的 amp-truncate-text 规则

需要更多帮助?

您已多次阅读本文档,但它仍未能涵盖您的所有问题?也许其他人也这么觉得:在 Stack Overflow 上与他们联系。

前往 Stack Overflow
发现错误或缺少功能?

AMP 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。

前往 GitHub