block-ellipsis-006.html (857B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: block-ellipsis styling</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/#block-ellipsis"> 6 <link rel="match" href="reference/block-ellipsis-005-ref.html"> 7 <meta name="assert" content="The block overflow ellipsis is styled according to the containing root inline box, even if it is contained within a span with different styling. If the span has box-decoration-break: clone, it will have a right margin."> 8 <style> 9 .clamp { 10 line-clamp: 3; 11 color: teal; 12 } 13 span { 14 color: purple; 15 font-weight: bold; 16 font-style: italic; 17 font-size: 1.5em; 18 border: 2px solid blue; 19 box-decoration-break: clone; 20 } 21 </style> 22 <div class="clamp"> 23 Line 1<br> 24 Line 2<br> 25 <span>Line 3</span><br> 26 Line 4 27 </div>