1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
---
title: '-webkit-line-clamp'
slug: Web/CSS/-webkit-line-clamp
translation_of: Web/CSS/-webkit-line-clamp
---
<p>{{CSSRef}}</p>
<p><strong><code>-webkit-line-clamp</code></strong> CSS 属性 可以把 {{Glossary("块容器")}} 中的内容限制为指定的行数.</p>
<p>它只有在 {{cssxref("display")}} 属性设置成 <code>-webkit-box</code> 或者 <code>-webkit-inline-box</code> 并且 {{cssxref("-webkit-box-orient")}} 属性设置成 <code>vertical</code>时才有效果</p>
<p>在大部分情况下,也需要设置 {{cssxref("overflow")}} 属性为 <code>hidden</code>, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).</p>
<p>当他应用于锚(anchor)元素时,截取动作可以发生在文本中间,而不必在末尾.</p>
<div class="blockIndicator note">
<p><strong>注意</strong>: 此属性在WebKit 中已经实现,但有一些问题.他是旧标准的一种支持.<a href="https://www.w3.org/TR/css-overflow-3/#propdef--webkit-line-clamp">CSS Overflow Module Level 3</a> 规范还定义了一个 {{cssxref("line-clamp")}} 属性, 用来代替此属性且避免一些问题.</p>
</div>
<h2 id="语法">语法</h2>
<pre class="brush: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: unset;
</pre>
<dl>
<dt><code>none</code></dt>
<dd>这个值表明内容显示不会被限制.</dd>
<dt>{{cssxref("integer")}}</dt>
<dd>这个值表明内容显示了多少行之后会被限制.必须大于0.</dd>
</dl>
<h2 id="例子">例子</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">p {
width: 300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample("例子", "100%", "100")}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}</td>
<td>{{Spec2("CSS3 Overflow")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.-webkit-line-clamp")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="https://css-tricks.com/line-clampin/">Line Clampin’ (Truncating Multiple Line Text)</a></li>
<li>{{cssxref("line-clamp")}}</li>
</ul>
|
