AMP

amp-fit-text

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

扩大或缩小字体大小以适合给定空间内的内容。

 

Required Scripts

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

用法

扩展或缩小其字体大小以适应所给空间内的内容。

amp-fit-text 组件使您可以管理指定区域内文本的大小和适合度。对于包含在 amp-fit-text元素中的内容, amp-fit-text 件会找到在可用空间内适合所有内容的最佳字体大小。amp-fit-text 的预期内容是文本或其他内联内容,但它也可以包含非内联内容。

在下面的例子中, the <amp-fit-text>元素被嵌套在一个300x300的蓝色 div 块中 (class fixedblock)。对于 <amp-fit-text> 元素,我们指定了一个 responsive 布局。因此,文本根据 <amp-fit-text> 元素的宽度和高度(200x200)提供的高宽比相应地缩放,但是文本不会超过其父元素的大小。

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>
在 Playground 中打开此代码段

下面的例子和上面的类似, 但是在这个例子中,我们指定了 max-font-size22,所以文本更小,但仍然适合空间:

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>
在 Playground 中打开此代码段

Overflowing content

如果 amp-fit-text 的内容溢出可用空间,即使使用指定 min-font-size,溢出的内容将被切断和隐藏。基于 WebKit 和基于 Blink-based 的浏览器显示省略号,表示内容溢出。

在下面的示例中,我们指定了 min-font-size40,这将导致内容超过其固定块父块的大小,因此文本将被截断以适应容器。

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>
在 Playground 中打开此代码段

属性

min-font-size

amp-fit-text 可以使用的最小字体大小指定为整数。

max-font-size

amp-fit-text 可以使用的最大字体大小指定为整数。

常见属性

此元素包含扩展到 AMP 组件的 常见属性

Styling

您可以直接使用CSS属性设置 amp-fit-text 的样式。特别是,你可以使用 text-alignfont-weightcolor 和许多其他的CSS属性, 除了 font-size 之外。

验证

请参阅 AMP 验证工具规范中的 amp-fit-text rules

需要更多帮助?

您已多次阅读本文档,但它仍未能涵盖您的所有问题?也许其他人也这么觉得:在 Stack Overflow 上与他们联系。

前往 Stack Overflow
发现错误或缺少功能?

AMP 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。

前往 GitHub