`amp-truncate-text`

Description	Truncates 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 Layouts	container, 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.

도움이 더 필요한가요?

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