-webkit-line-clamp

有限可用性

此功能不是基線，因為它在一些最廣泛使用的瀏覽器中無法使用。

**-webkit-line-clamp** CSS 屬性允許將 塊級 元素的內容限制為指定行數。

它僅在與 display 屬性設定為 -webkit-box 或 -webkit-inline-box 以及 -webkit-box-orient 屬性設定為 vertical 結合使用時才有效。儘管它們已被棄用，但這三個屬性的共同依賴關係是完全指定的行為，並將繼續得到支援。

在大多數情況下，您還需要將 overflow 設定為 hidden，否則內容不會被裁剪，但在指定行數後仍會顯示省略號。

當應用於錨元素時，截斷可能發生在文字中間，而不是一定發生在文字末尾。

**注意：** 此屬性最初是在 WebKit 中實現的，存在一些問題，例如對其他兩個遺留屬性的依賴。它在 CSS Overflow Module Level 4 中得到了標準化，用於提供遺留支援。CSS Overflow Module Level 4 還定義了 line-clamp 屬性，該屬性旨在替換此屬性並避免其問題。但是，出於相容性原因，所有支援 line-clamp 的瀏覽器也將支援 -webkit-line-clamp。

語法

css
/* Keyword value */
-webkit-line-clamp: none;

/* <integer> values */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* Global values */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: revert;
-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;

值

none

此值指定內容不會被截斷。

<integer>

此值指定將截斷內容的行數。它必須大於 0。

正式定義

初始值none
適用於所有元素
繼承否
計算值如指定
動畫型別按計算值的型別

正式語法

-webkit-line-clamp = 
  none             |
  <integer [1,∞]>

示例

截斷段落

HTML

html
<p>
  In this example the <code>-webkit-line-clamp</code> property is set to
  <code>3</code>, which means the text is clamped after three lines. An ellipsis
  will be shown at the point where the text is clamped.
</p>

CSS

css
p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

結果

規範

規範
CSS Overflow Module Level 4
# propdef-line-clamp

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱