Important: this documentation is not applicable to your currently selected format stories!

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>

Supported Layouts

container fill fixed fixed-height flex-item intrinsic nodisplay responsive

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

行为

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