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