Skip to content

Latest commit

 

History

History
85 lines (64 loc) · 3.05 KB

amp-fit-text.md

File metadata and controls

85 lines (64 loc) · 3.05 KB
Raw

amp-fit-text

Description Expands or shrinks its font size to fit the content within the space given to it.
Availability Stable
Required Script <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
Supported Layouts FILL, FIXED, FIXED_HEIGHT, FLEX_ITEM, NODISPLAY, RESPONSIVE
Examples image_galleries_with_amp-carousel.html
everything.amp.html

Behavior

The amp-fit-text component expects its content to be text or other inline content, but it can also contain non-inline content. For the given content the amp-fit-text will try to find the best font size to fit all of the content within the available space.

If content of the amp-fit-text is overflowing the available space event with the minimum font size, the overflowing content will be cut off and hidden. The WebKit and Blink-based browsers will show ellipsis in this case.

The amp-fit-text accepts one of the following layout values: fixed, fixed-height, responsive or fill.

For example:

<amp-fit-text width="300" height="200" layout="responsive"
    max-font-size="52">
  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
  inermis reprehendunt.
</amp-fit-text>

Attributes

min-font-size

The minimum font size as an integer that the amp-fit-text can use.

max-font-size

The maximum font size as an integer that the amp-fit-text can use.

Styling

The amp-fit-text component can be styled with standard CSS. In particular, it's possible to use text-align, font-weight, color and many other CSS properties with the main exception of font-size.

Validation

See amp-fit-text rules in the AMP validator specification.