amp-fit-text

1.0 0.1

<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` 預期的內容是文字或其他行內內容，但也可能包含非行內內容。

在以下範例中，`<amp-fit-text>` 元素巢狀於 300x300 藍色 `div` 區塊中。對於 `<amp-fit-text>` 元素，我們指定了 `responsive` 版面配置。因此，文字會根據 `<amp-fit-text>` 元素的寬度和高度 (200x200) 提供的長寬比進行回應式縮放，但文字不會超出其父元素的大小。

<div style="width: 300px; height: 300px; background:#005AF0; color: #FFF;">
  <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>

以下範例與上述範例類似，但在此範例中，我們指定 `max-font-size` 為 `22`，因此文字較小但仍符合空間

<div style="width: 300px; height: 300px; background:#005AF0; color: #FFF;">
  <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>

溢出內容

如果 `amp-fit-text` 的內容溢出可用空間，即使指定了 `min-font-size`，溢出的內容仍會被截斷並隱藏。基於 WebKit 和 Blink 的瀏覽器會針對溢出的內容顯示省略符號。

在以下範例中，我們指定了 `min-font-size` 為 `40`，並在 `amp-fit-text` 元素內新增了更多內容。這會導致內容超出其固定區塊父元素的大小，因此文字會被截斷以符合容器。

<div style="width: 300px; height: 300px; background:#005AF0; color: #FFF;">
  <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. Lorem ipsum dolor sit amet, has nisl nihil convenire
    et, vim at aeque inermis reprehendunt
  </amp-fit-text>
</div>

溢出內容的可存取性考量

雖然溢出的內容在*視覺上*會被截斷以符合容器，但請注意，它仍然存在於文件中。請勿依賴溢出行為來簡單地將大量內容「塞入」您的頁面中 - 雖然在視覺上看起來可能很合適，但可能會導致頁面對於輔助技術 (例如螢幕閱讀器) 的使用者而言過於冗長，因為對於這些使用者而言，所有截斷的內容仍會完整讀取/宣告。

屬性

min-font-size

以像素為單位指定 `amp-fit-text` 可以使用的最小字型大小，以整數表示。

max-font-size

以像素為單位指定 `amp-fit-text` 可以使用的最大字型大小，以整數表示。

通用屬性

此元素包含擴充至 AMP 元件的通用屬性。

樣式設定

您可以使用標準 CSS 設定 `amp-fit-text` 的樣式。特別是，您可以使用 `text-align`、`font-weight`、`color` 和許多其他 CSS 屬性，但主要例外是 `font-size`。

驗證

請參閱 AMP 驗證器規格中的amp-fit-text 規則。