AMP

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.

さらに支援が必要ですか?

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか?他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする
バグや不足している機能がありますか?

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub にアクセスする