CSS max-lines Property
Use the max-lines CSS property to specify the maximum number of the lines for the content. See examples and try for yourself.
The CSS max-lines property limits the number of visible lines in a block container. When content exceeds this limit, it is clipped by the container's overflow handling. This behavior works in tandem with block-overflow: clamp; to hide the excess content cleanly.
The max-lines property can create a clamping effect with the block-overflow property.
This property is in progress.
Let’s remember that the line-clamp property is a shorthand for the max-lines and block-overflow properties.
The max-lines property is not currently supported by all browsers. For broader compatibility, you can use the -webkit-line-clamp property as a fallback.
Browser support is limited. Check MDN for up-to-date compatibility.
| Initial Value | none |
|---|---|
| Applies to | Fragment boxes. |
| Inherited | No. |
| Animatable | No. |
| Version | CSS Overflow Module Level 4 |
| DOM Syntax | object.style.maxLines = "2"; |
Syntax
Syntax of CSS max-lines Property
max-lines: none | <integer> | initial | inherit;Example of the max-lines property:
Example of CSS 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;
block-overflow: clamp;
-webkit-line-clamp: 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 clipped. Negative values are invalid. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property from its parent element. |
Practice
What is the function of the 'max-lines' property in CSS?