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/line-clamp-with-floats-008.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="Line-clamp containers create an independent formatting context, so they 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 {
line-clamp: 4;
font: 16px / 32px serif;
padding: 0 4px;
white-space: pre;
background-color: yellow;
}
.float {
/* Floats create a parallel fragmentation context, and the forced break that
* line-clamp causes on the main context should not cause the float to
* fragment. */
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>