重要提示：此文档不适用于您当前选择的格式广告！

amp-truncate-text

实验性

描述

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

必需的脚本

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

支持的布局

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

用法

用省略号截断文本，当存在溢出时，可以选择显示溢出元素。溢出元素始终放置在内容的末尾，并且必须是 <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