Expands or shrinks its font size to fit the content within the space given to it.
|Supported Layouts||fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive|
|Examples||See AMP By Example's amp-fit-text example.|
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.
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
22, so the text is smaller but still fits the space:
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
40, which causes the content to exceed the size of its fixed block parent, so the text is truncated to fit the container.
|min-font-size||Specifies the minimum font size as an integer that the
|max-font-size||Specifies the maximum font size as an integer that the
|common attributes||This element includes common attributes extended to AMP components.|
You can style the
amp-fit-text with standard CSS. In particular, you can use
color and many other CSS properties, with the main exception of
See amp-fit-text rules in the AMP validator specification.