<html>
<head>
<style>
div {
display: -webkit-inline-box;
width: 100px;
-webkit-box-orient: vertical;
overflow: hidden;
border: solid thin grey;
}
</style>
</head>
<body>
This tests the -webkit-line-clamp property<br><br>
<div style="-webkit-line-clamp: 2;">
2 lines. This is an example of ellipsis-truncation of multi-line text.<a href="#">More</a>
</div>
<div style="-webkit-line-clamp: 3">
3 lines. No link at the end. This is an example of ellipsis-truncation of multi-line text.
</div>
<div style="-webkit-line-clamp: 0;">
0 lines. This is an invalid value for -webkit-line-clamp.
</div>
<div style="-webkit-line-clamp: -1;">
-1 lines. This is an invalid value for -webkit-line-clamp.
</div>
<div style="-webkit-line-clamp: -1%;">
-1%. This is an invalid value for -webkit-line-clamp.
</div>
</body>
</html>
Codebase Browser
chromium