line-clamp
CSS line-clamp Property
The line-clamp property truncates a text at a specified number of lines. It limits the text, after you tell it the desirable number of lines, adding an ellipsis after the last word or portion of a word that is demonstrated. It is a shorthand for:
max-lines
block-overflow
This property is in progress.
Disadvantages of the CSS line-clamp Property
Disadvantages of the CSS line-clamp Property
CSS line-clamp property has some disadvantages, and we are going to look through each one:
The CSS line-clamp property has limited browser support. It is not supported by such browsers as Opera Mini. However, you can create fallbacks for the browsers that don’t support this property. Using @supports (-webkit-line-clamp: 2) {} check, will show whether it works in the current browser or not. If it doesn’t work, this check will provide a fallback for that browser. Another disadvantage is that it doesn’t offer any alternative to the ellipsis. This causes another problem: you may get different definitions in different language. The CSS line-clamp property calls for lots of supporting properties like:
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
| 类目 | 类目 |
|---|---|
| Initial Value | none |
| Applies to | - |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.lineClamp = “2”; |
Please note that in the case of “display: -webkit-box”, this is an older, non-standard way of achieving a flexible box layout that was used by older versions of Safari and some other WebKit-based browsers. The “display: flex” property is now the standard way of achieving a flexible box layout, but for compatibility with older versions of Safari and other WebKit-based browsers, the “-webkit-box” prefix is still used as a fallback.
Syntax
Syntax
line-clamp: normal | <integer> | initial | inherit;
Example of the line-clamp property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
align-items: center;
background: radial-gradient( farthest-side at bottom left, #eee, #ccc),
radial-gradient( farthest-corner at bottom right, #eee, #ccc 400px);
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
line-height: 1.5;
}
.element {
background-color: #fff;
box-shadow: 1px 1px 10px #666;
padding: 2em;
width: 200px;
}
.element p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<h2>CSS line-clamp property example</h2>
<div class="element">
<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.
<p>
</div>
</body>
</html>
Result
In the given example, the text is cut at the fourth line.
Values
Values
| Value | Description |
|---|---|
| none | No maximum number of lines and no truncation. |
| <integer> | Sets maximum number of lines before truncating the content and then displays an ellipsis. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |