---
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;

/* &lt;integer&gt; 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">&lt;p&gt;
  In this example the &lt;code&gt;-webkit-line-clamp&lt;/code&gt; property is set to &lt;code&gt;3&lt;/code&gt;, which means the text is clamped after three lines.
  An ellipsis will be shown at the point where the text is clamped.
&lt;/p&gt;</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>