diff options
Diffstat (limited to 'files/zh-cn/web/css/-webkit-line-clamp/index.html')
| -rw-r--r-- | files/zh-cn/web/css/-webkit-line-clamp/index.html | 97 |
1 files changed, 97 insertions, 0 deletions
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; + +/* <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> |