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

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