text-indent-each-line-hanging.html (2102B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>text-indent 'each-line' and 'hanging' modifiers</title> 6 <link rel="author" title="Jaehun Lim" href="mailto:ljaehun.lim@samsung.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-text-3/#text-indent-property"> 8 <link rel="match" href="reference/text-indent-each-line-hanging-ref.html"> 9 <meta name="assert" content="'each-line' and 'hanging' properly works"> 10 11 <link rel="stylesheet" href="/fonts/ahem.css" /> 12 <style> 13 div { width:80px; font: 10px Ahem; background-color:lightgray; } 14 .normal { text-indent: 4em; } 15 .eachline { text-indent: 4em each-line; } 16 .hanging { text-indent: 4em hanging; } 17 .eachlinehanging { text-indent: 4em each-line hanging; } 18 .indent { color: blue; } 19 </style> 20 </head> 21 <body> 22 All black boxes should be left-aligned. All blue boxes should be right-aligned. 23 24 <!-- normal text-indent --> 25 <div class="normal"> 26 <span class="indent">xxxx</span> xxxx<br>xxxx 27 </div> 28 <br> 29 <!-- each-line with a soft wrap break --> 30 <div class="eachline"> 31 <span class="indent">xxxx</span> xxxx xxxx 32 </div> 33 <br> 34 <!-- each-line with a forced line break --> 35 <div class="eachline"> 36 <span class="indent">xxxx</span><br><span class="indent">xxxx</span><br><span class="indent">xxxx</span> 37 </div> 38 <br> 39 <!-- each-line with a soft wrap break and a forced line break --> 40 <div class="eachline"> 41 <span class="indent">xxxx</span> xxxx<br><span class="indent">xxxx</span> 42 </div> 43 <br> 44 <!-- normal text-indent with hanging --> 45 <div class="hanging"> 46 xxxx <span class="indent">xxxx</span><br><span class="indent">xxxx</span> 47 </div> 48 <br> 49 <!-- each-line and hanging with a soft wrap break --> 50 <div class="eachlinehanging"> 51 xxxx <span class="indent">xxxx</span> <span class="indent">xxxx</span> 52 </div> 53 <br> 54 <!-- each-line and hanging with a forced line break --> 55 <div class="eachlinehanging"> 56 xxxx<br>xxxx<br>xxxx 57 </div> 58 <br> 59 <!-- each-line and hanging with a soft wrap break and a forced line break --> 60 <div class="eachlinehanging"> 61 xxxx <span class="indent">xxxx</span><br>xxxx 62 </div> 63 </body> 64 </html>