amp-fit-text
Expands or shrinks its font size to fit the content within the space given to it.
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, intrinsic, nodisplay, responsive |
Examples | See AMP By Example's amp-fit-text example. |
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
min-font-size | Specifies the minimum font size as an integer that the amp-fit-text can use. |
max-font-size | Specifies the maximum font size as an integer that the amp-fit-text can use. |
common attributes | This element includes common attributes extended to AMP components. |
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.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.
Go to Stack Overflow Found a bug or missing a feature?The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.
Go to GitHub