Skip to content

Latest commit

 

History

History
61 lines (42 loc) · 1.96 KB

amp-fit-text.md

File metadata and controls

61 lines (42 loc) · 1.96 KB
Raw

amp-fit-text

The amp-fit-text component can expand or shrink its font size to fit the content within the space given to it.

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.