|Description||Truncates text within a container with an ellipsis.|
Experimental; You must turn on the `amp-truncate-text` experiment to use this component.
|Supported Layouts||container, fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive|
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
|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 |
|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 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>
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 OverflowFound 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