amp-truncate-text

实验性

描述

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

必需脚本

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

支持的布局

容器填充固定固定高度 flex-item 内在不显示响应式

用法

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