amp-fit-text

Expands or shrinks its font size to fit the content within the space given to it.

Behavior

The amp-fit-text component allows you to manage the size and fit of text within a specified area. For content contained in an amp-fit-text element, the amp-fit-text component finds the best font size to fit all of the content within the available space. The expected content for amp-fit-text is text or other inline content, but it can also contain non-inline content.

Example: Text scales to fit area

In the following example, the <amp-fit-text> element is nested within a 300x300 blue div block (class fixedblock). For the <amp-fit-text> element, we specified a responsive layout. As a result, the text scales responsively per the aspect ratio provided by the width and height (200x200) of the <amp-fit-text> element, but the text does not exceed the size of its parent.

<div class="fixedblock">
  <amp-fit-text width="200" height="200" layout="responsive">
    Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
    inermis reprehendunt.
  </amp-fit-text>
</div>

Example: Text scales to fit area using a maximum font size

The following example is similar to the one above, but in this example we specify a max-font-size of 22, so the text is smaller but still fits the space:

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

Overflowing content

If the content of the amp-fit-text overflows the available space, even with a min-font-size specified, the overflowing content is cut off and hidden. WebKit and Blink-based browsers show ellipsis for overflowing content.

Example: Text truncates when content overflows area

In the following example, we specified a min-font-size of 40, which causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.

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

Attributes

Styling

You can style the amp-fit-text with standard CSS. In particular, you can 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.