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-auto-with-ruby-004.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: `line-clamp: auto` with ruby</title>
<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
<link rel="match" href="reference/webkit-line-clamp-005-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<meta name="assert" content="If a line-under ruby increases the bottom leading of what would be the last line before clamp so that it does not fully fit within the height, the clamp point will be set before that line.">
<style>
.clamp {
line-clamp: auto;
max-height: 5lh;
font: 16px / 32px serif;
white-space: pre;
background-color: yellow;
padding: 0 4px;
}
ruby {
ruby-position: under;
}
rt {
font: 32px / 32px Ahem;
color: blue;
}
</style>
<div class="clamp">Line 1
Line 2
Line 3
Line 4
<ruby>Line 5<rt>X</ruby>
Line 6</div>