Skip to content

Latest commit

 

History

History
88 lines (66 loc) · 3.09 KB

amp-fit-text.md

File metadata and controls

88 lines (66 loc) · 3.09 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 Annotated code example that includes amp-fit

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.

common attributes

This element includes common attributes extended to AMP components.

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.