webkit-line-clamp-051.html (763B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: right-aligned -webkit-line-clamp ellipsis</title> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#propdef--webkit-line-clamp"> 5 <link rel="match" href="reference/webkit-line-clamp-051-ref.html"> 6 <meta name="assert" content="If the -webkit-line-clamp ellipsis would be placed in a right-aligned line, the alignment happens after placing the ellipsis, which means the ellipsis ends at the right edge of the line."> 7 <style> 8 .clamp { 9 display: -webkit-box; 10 -webkit-box-orient: vertical; 11 -webkit-line-clamp: 2; 12 overflow: hidden; 13 14 width: 10em; 15 border: 2px solid black; 16 text-align: right; 17 } 18 </style> 19 <div class="clamp"> 20 Line 1 <br> 21 Line 2 <br> 22 Line 3 23 </div>