The CSS max-lines property is used to limit a block content to a maximum number of lines before being cropped out.
The max-lines property can create a clamping effect with the block-overflow property.
Let’s remember that the line-clamp property is a shorthand for the max-lines and the block-overflow properties.
The max-lines property is also called “limiting visible lines”, because the content falling within the maximum number of lines isn’t rendered by the browser. Let’s discuss the content that is cut into fragments by the CSS max-lines property. Here we have two fragments: one rendered in view and another one that is not rendered and is out of view. As a result, the box containing the current content captures the fragmented part, passing it to another box which belongs to a CSS Region.
| Initial Value | none |
| Applies to | Fragment boxes. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.maxLines = “2”; |
Syntax
max-lines: none | <integer> | initial | inherit;Example of the max-lines property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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 property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>Values
| Value | Description |
|---|---|
| none | No maximum number of lines is specified. |
| <integer> | Sets the number of lines before content is discarded. Negative values are invalid. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |