47 lines
1.9 KiB
HTML
47 lines
1.9 KiB
HTML
<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: 50%;">
|
|
50% truncation. This is an example of ellipsis-truncation of multi-line text.<a href="#">More</a>
|
|
</div>
|
|
<div style="-webkit-line-clamp: 0%;">
|
|
0% truncation. This does the most truncation possible, truncating to 1 line.<a href="#">More</a>
|
|
</div>
|
|
<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: 0%; -webkit-line-clamp: 3;">
|
|
Backwards compatible truncation. 3 lines on the latest version of WebKit. 1 line on older versions of WebKit.<a href="#">More</a>
|
|
</div>
|
|
<div style="-webkit-line-clamp: 30%;">
|
|
30% truncation. No link at the end. This is an example of ellipsis-truncation of multi-line text.
|
|
</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>
|
|
<div style="-webkit-line-clamp: 150%;">
|
|
150% truncation. This does the least truncation possible, truncating nothing.
|
|
</div>
|
|
</body>
|
|
</html>
|