line-clamp-auto-with-ruby-005.tentative.html (1324B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: `line-clamp: auto` with ruby</title> 4 <link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> 6 <link rel="match" href="reference/line-clamp-auto-with-ruby-005-ref.html"> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <meta name="assert" content="If a line-under ruby would increase the bottom leading of what would be the last line before clamp so that it does not fully fit within the height, but instead the ruby annotation space eats into the box's bottom padding, then the clamp point will be set after that line."> 9 <style> 10 .clamp { 11 line-clamp: auto; 12 max-height: 5lh; 13 font: 16px / 32px serif; 14 white-space: pre; 15 background-color: yellow; 16 padding: 0 4px; 17 18 /* With the Ahem font, the text is 16px = .5lh tall. Without ruby, the leading 19 * would be evenly distributed, so the bottom leading would be .25lh. Since 20 * the ruby annotation is 1lh tall, we need .75lh of padding to completely 21 * contain it. */ 22 padding-bottom: .75lh; 23 } 24 ruby { 25 font-family: Ahem; 26 ruby-position: under; 27 } 28 rt { 29 font: 32px / 32px Ahem; 30 color: blue; 31 } 32 </style> 33 34 <div class="clamp">Line 1 35 Line 2 36 Line 3 37 Line 4 38 <ruby>Line 5<rt>X</ruby> 39 Line 6</div>