AMP

amp-fit-text

Description

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

Required Scripts

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

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.

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
<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>
Bu kod parçacığını playground'ta aç
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:

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
<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>
Bu kod parçacığını playground'ta aç

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.

Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.
<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>
Bu kod parçacığını playground'ta aç

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.

Daha fazla yardıma mı ihtiyacınız var?

Bu belgeyi defalarca okudunuz ama tüm sorularınıza tatmin edici bir yanıt bulamadınız mı? Belki başka kişiler de bu şekilde hissetmiştir: Stack Overflow'dan onlara ulaşın.

Stack Overflow'a git
Bir hata veya eksik bir özellik mi buldunuz?

AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.

GitHub'a git