CSS max-lines 属性-之路教程

CSS max-lines 属性值说明

值	描述
none	未指定最大线数。
<integer>	设置丢弃内容之前的行数。负值无效。
initial	将属性设置为默认值。
inherit	从其父元素继承属性。

CSS max-lines 属性

CSS max-lines 属性用于在裁剪之前将块内容限制为最大行数。

max-lines 属性可以通过 block-overflow 属性创建钳位效果。

让我们记住 line-clamp 属性是 max-lines 和 block-overflow 属性的简写。

当前并非所有浏览器都支持 max-lines 属性，但我们可以使用 WebKit 专有的 line-clamp 属性实现来获得支持。

max-lines 属性也称为“限制可见行”，因为浏览器不会呈现落在最大行数内的内容。
让我们讨论一下被 CSS max-lines 属性切割成片段的内容。
这里我们有两个片段：一个呈现在视图中，另一个未呈现且不在视图中。
结果，包含当前内容的框捕获碎片部分，将其传递给另一个属于 CSS 区域的框。

负值无效。

初始值	none
应用于	片段框。
继承	无效
可动画的	无效
版本	CSS3.
DOM 语法	object.Style.maxlines =“2”;

语法

max-lines: none | <integer> | initial | inherit;

max-lines 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        overflow: hidden;
        box-sizing: content-box;
        width: 300px;
        font-size: 16px;
        line-height: 24px;
        font-family: Helvetica, sans-serif;
        max-lines: 3;
      }
    </style>
  </head>
  <body>
    <h2>Max-lines 属性示例</h2>
    <p>我爱你时你正一贫如洗寒窗苦读，离开你时你正金榜题名洞房花烛。</p>
  </body>
</html>

日期：2020-06-02 22:14:39 来源：oir作者：oir

←CSS max-height 属性

CSS max-width 属性→

CSS max-lines 属性值说明

语法

max-lines 属性的示例：

目录