AMP

Important: this documentation is not applicable to your currently selected format email!

amp-truncate-text

Experimental

Description

Truncates text with an ellipsis, optionally showing an overflow element.

 

Required Scripts

<script async custom-element="amp-truncate-text" src="https://cdn.ampproject.org/v0/amp-truncate-text-0.1.js"></script>

Usage

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>.

<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>

Valid 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.

Custom actions

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.

Ti servono altre informazioni?

Hai letto questo documento decine di volte ma non risponde a tutte le tue domande? Forse ci sono altre persone col tuo stesso problema: entra in contatto con loro su Stack Overflow.

Vai a Stack Overflow
Hai trovato un bug o una funzione mancante?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Vai a GitHub