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

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