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="collapsed" | An optional element show when the element has truncated text. Clicking
this will expand the element. This must be a direct child of amp-truncate-text. |
| slot="expanded" | 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. |
| slot="persistent" | An optional element than is always shown, regardless of whether or not the text is truncated. 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="collapsed">See more</button> <button slot="expanded">See less</button> </amp-truncate-text>
Using a Custom Action
If you do not want to expand in place, you can use slot="persistent" to perform a custom acton, such as navigating to another page with additional information. This can be useful when there is more content than would make sense to expand inline.
<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>
You can also customize the action for an element with slot="collapsed" by using either an anchor tag or a tap action. Note that this will not show up if the text fits. For example:
<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>
By default, clicking within an element that has slot="expanded" will collapse the content. Like for slot="collapsed", using an anchor tag or a tap action will allow you to override the behavior to do something else, like link to another page.
<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>
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