重要事項：此文件不適用於您目前選取的格式廣告！

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