<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: `line-clamp: auto` with ruby</title>
<link rel="author" title="Andreu Botella" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
<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>