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

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