amp-truncate-text

實驗性

說明

將文字截斷並以省略符號表示，可選擇性地顯示溢位元素。

必要腳本

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

支援的版面配置

container fill fixed fixed-height flex-item intrinsic nodisplay responsive

用法

將文字截斷並以省略符號表示，可選擇性地在溢位時顯示溢位元素。溢位元素總是放置在內容的末尾，且必須是 <amp-truncate-text> 的直接子元素。

<amp-truncate-text layout="fixed" height="3em" width="20em">
  Some text that may get truncated.
  <button slot="collapsed">See more</button>
  <button slot="expanded">See less</button>
</amp-truncate-text>

有效子元素

slot="collapsed"	一個可選元素，在元素文字被截斷時顯示。點擊此元素將展開該元素。這必須是 `amp-truncate-text` 的直接子元素。
slot="expanded"	一個可選元素，在元素展開後顯示。點擊此元素將把元素摺疊回展開前的大小。這必須是 `amp-truncate-text` 的直接子元素。
slot="persistent"	一個可選元素，始終顯示，無論文字是否被截斷。這必須是 `amp-truncate-text` 的直接子元素。

自訂動作

如果您不想在原地展開，可以使用 slot="persistent" 執行自訂動作，例如導航到另一個包含更多資訊的頁面。當內容過多而不適合內嵌展開時，這會很有用。

<amp-truncate-text layout="fixed-height" height="3em">
  Some text that may get truncated.
  <a href="some/url" slot="persistent">See more</a>
</amp-truncate-text>

您也可以透過使用錨點標籤或點擊動作，為具有 slot="collapsed" 的元素自訂動作。請注意，如果文字適合，則不會顯示此元素。例如

<amp-truncate-text layout="fixed-height" height="3em">
  Some text that may get truncated.
  <a href="some/url" slot="collapsed">See more</a>
</amp-truncate-text>

預設情況下，點擊具有 slot="expanded" 的元素內會摺疊內容。與 slot="collapsed" 類似，使用錨點標籤或點擊動作可讓您覆寫此行為以執行其他操作，例如連結到另一個頁面。

<amp-truncate-text layout="fixed-height" height="3em">
  Some text that may get truncated.
  <button slot="collapsed">See more</button>
  <a href="some/url" slot="expanded">See even more</a>
</amp-truncate-text>

驗證

請參閱 AMP 驗證器規範中的 amp-truncate-text 規則。

需要更多協助嗎？

您已經閱讀這份文件很多次，但它仍然沒有涵蓋您的所有問題？也許其他人也有相同的感受：在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開源社群的持續參與者，但我們也歡迎針對您特別關注的問題提供一次性貢獻。

前往 GitHub