| <html> |
| <head> |
| <title>[css3-text] text-indent</title> |
| <style> |
| div { width:80px; font: 10px Ahem; background-color:lightgray; } |
| .normal { text-indent: 4em; } |
| .eachline { text-indent: 4em each-line; } |
| .hanging { text-indent: 4em hanging; } |
| .eachlinehanging { text-indent: 4em each-line hanging; } |
| .indent { color: blue; } |
| </style> |
| </head |
| <body> |
| <!-- |
| all black boxes should be left-aligned. |
| all blue boxes should be right-aligned. |
| --> |
| |
| <!-- normal text-indent --> |
| <div class="normal"> |
| <span class="indent">xxxx</span> xxxx<br>xxxx |
| </div> |
| <br> |
| <!-- each-line with a soft wrap break --> |
| <div class="eachline"> |
| <span class="indent">xxxx</span> xxxx xxxx |
| </div> |
| <br> |
| <!-- each-line with a forced line break --> |
| <div class="eachline"> |
| <span class="indent">xxxx</span><br><span class="indent">xxxx</span><br><span class="indent">xxxx</span> |
| </div> |
| <br> |
| <!-- each-line with a soft wrap break and a forced line break --> |
| <div class="eachline"> |
| <span class="indent">xxxx</span> xxxx<br><span class="indent">xxxx</span> |
| </div> |
| <br> |
| <!-- normal text-indent with hanging --> |
| <div class="hanging"> |
| xxxx <span class="indent">xxxx</span><br><span class="indent">xxxx</span> |
| </div> |
| <br> |
| <!-- each-line and hanging with a soft wrap break --> |
| <div class="eachlinehanging"> |
| xxxx <span class="indent">xxxx</span> <span class="indent">xxxx</span> |
| </div> |
| <br> |
| <!-- each-line and hanging with a forced line break --> |
| <div class="eachlinehanging"> |
| xxxx<br>xxxx<br>xxxx |
| </div> |
| <br> |
| <!-- each-line and hanging with a soft wrap break and a forced line break --> |
| <div class="eachlinehanging"> |
| xxxx <span class="indent">xxxx</span><br>xxxx |
| </div> |
| </body> |
| </html> |
