AMP

amp-truncate-text

DescriptionTruncates text within a container with an ellipsis.
Availability
Experimental; You must turn on the `amp-truncate-text` experiment to use this component.
Required Script<script async custom-element="amp-truncate-text" src="https://cdn.ampproject.org/v0/amp-truncate-text-0.1.js"></script>
Supported Layoutscontainer, fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive

Behavior

Truncates text with an ellipsis, optionally showing an overflow element when there is overflow. The overflow element is always placed at the end of the content and must be a direct child of <amp-truncate-text>.

Children

slot="expand"An optional element show when the element has truncateed text. Clicking this will expand the element. This must be a direct child of amp-truncate-text.
slot="collapse"An optional element show when the element was expanded. Clicking this will collapse the element to the same size before expansion. This must be a direct child of amp-truncate-text.

Usage

<amp-truncate-text layout="fixed" height="3em" width="20em">
  Some text that may get truncated.
  <button slot="expand">See more</button>
  <button slot="collapse">See less</button>
</amp-truncate-text>

Validation

See amp-truncate-text rules in the AMP validator specification.

¿Necesitas más ayuda?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub