line-clamp
line-clamp CSS 屬性允許將塊內容的行數限制為指定值。
注意： 為了相容舊版，帶有廠商字首的 -webkit-line-clamp 屬性僅在 display 屬性設定為 -webkit-box 或 -webkit-inline-box 且 -webkit-box-orient 屬性設定為 vertical 時才有效。儘管這些帶有字首的屬性已廢棄，但這三個屬性的共同依賴是一個完全指定的行為，並將繼續得到支援。
在大多數情況下，你可能還需要將 overflow 設定為 hidden，否則內容不會被裁剪，但在指定行數之後仍會顯示省略號。
當應用於錨元素時，截斷可能發生在文字中間，而不一定是末尾。
語法
css
/* Keyword value */
line-clamp: none;
/* <integer> values */
line-clamp: 3;
line-clamp: 10;
/* Global values */
line-clamp: inherit;
line-clamp: initial;
line-clamp: revert;
line-clamp: revert-layer;
line-clamp: unset;
值
正式定義
正式語法
line-clamp =
none |
[ <integer [1,∞]> || <'block-ellipsis'> ] -webkit-legacy?
<block-ellipsis> =
no-ellipsis |
auto |
<string>
示例
截斷段落
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 |
瀏覽器相容性
載入中…