重要提示：此文档不适用于您当前选择的格式电子邮件！

amp-truncate-text

实验性

描述

使用省略号截断文本，可以选择显示溢出元素。

必需脚本

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

支持的布局

容器填充固定固定高度弹性项固有不显示响应式

用法

使用省略号截断文本，当发生溢出时，可以选择显示溢出元素。溢出元素始终放置在内容的末尾，并且必须是 <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="collapsed"	当元素截断文本时，可以选择显示该元素。单击此元素将展开该元素。这必须是 `amp-truncate-text` 的直接子元素。
slot="expanded"	当元素展开时，可以选择显示该元素。单击此元素会将元素折叠到展开之前的大小。这必须是 `amp-truncate-text` 的直接子元素。
slot="persistent"	可以选择始终显示的元素，无论文本是否被截断。这必须是 `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>

验证

请参阅 AMP 验证器规范中的 amp-truncate-text 规则。

需要更多帮助？

您已经阅读过此文档十几次，但它并没有真正涵盖您的所有问题？也许其他人也有同感：在 Stack Overflow 上联系他们。

前往 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但也欢迎您对您特别感兴趣的问题做出一次性贡献。

前往 GitHub