From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 files/zh-cn/web/css/-webkit-line-clamp/index.html | 97 +++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 files/zh-cn/web/css/-webkit-line-clamp/index.html

(limited to 'files/zh-cn/web/css/-webkit-line-clamp')

diff --git a/files/zh-cn/web/css/-webkit-line-clamp/index.html b/files/zh-cn/web/css/-webkit-line-clamp/index.html
new file mode 100644
index 0000000000..ec8c7b0d89
--- /dev/null
+++ b/files/zh-cn/web/css/-webkit-line-clamp/index.html
@@ -0,0 +1,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;
+
+/* &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>
-- 
cgit v1.2.3-54-g00ecf