Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-overflow/line-clamp-with-floats-008.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: line-clamp IFC with floats extending past the clamp point</title>
<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
<link rel="match" href="reference/line-clamp-with-floats-008-ref.html">
<meta name="assert" content="If the line-clamp container is an independent formatting context, it will clear contained floats before the clamp point, even if they extend beyond the last line. Lines past the clamp point will remain hidden.">
<style>
.clamp {
display: flow-root;
line-clamp: 4;
font: 16px / 32px serif;
padding: 0 4px;
white-space: pre;
background-color: yellow;
}
.float {
float: left;
width: 50px;
height: 50px;
margin: 4px;
background-color: skyblue;
}
</style>
<div class="clamp">Line 1
Line 2
Line 3
<div class="float"></div>Line 4
Line 5</div>