OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <title>[css3-text] text-indent</title> | 3 <title>[css3-text] text-indent</title> |
4 <style> | 4 <style> |
5 div { width:80px; font: 10px Ahem; background-color:lightgray; } | 5 div { width:80px; font: 10px Ahem; background-color:lightgray; } |
6 .normal { text-indent: 4em; } | 6 .indent { color: blue; padding-left:4em; } |
7 .eachline { width:80px; text-indent: 4em each-line; } | |
8 .indent { color: blue; } | |
9 </style> | 7 </style> |
10 </head | 8 </head> |
11 <body> | 9 <body> |
12 <!-- | 10 <div> |
13 all black boxes should be left-aligned. | |
14 all blue boxes should be right-aligned. | |
15 --> | |
16 | |
17 <!-- normal text-indent --> | |
18 <div class="normal"> | |
19 <span class="indent">xxxx</span><br>xxxx<br>xxxx | 11 <span class="indent">xxxx</span><br>xxxx<br>xxxx |
20 </div> | 12 </div> |
21 <br> | 13 <br> |
22 <!-- each-line with a soft wrap break --> | 14 <div> |
23 <div class="eachline"> | |
24 <span class="indent">xxxx</span> xxxx xxxx | 15 <span class="indent">xxxx</span> xxxx xxxx |
25 </div> | 16 </div> |
26 <br> | 17 <br> |
27 <!-- each-line with a forced line break --> | 18 <div> |
28 <div class="eachline"> | |
29 <span class="indent">xxxx</span><br><span class="indent">xxxx</span><br><span cl
ass="indent">xxxx</span> | 19 <span class="indent">xxxx</span><br><span class="indent">xxxx</span><br><span cl
ass="indent">xxxx</span> |
30 </div> | 20 </div> |
31 <br> | 21 <br> |
32 <!-- each-line with a soft wrap break and a forced line break --> | 22 <div> |
33 <div class="eachline"> | |
34 <span class="indent">xxxx</span> xxxx<br><span class="indent">xxxx</span> | 23 <span class="indent">xxxx</span> xxxx<br><span class="indent">xxxx</span> |
35 </div> | 24 </div> |
| 25 <br> |
| 26 <div> |
| 27 xxxx<br><span class="indent">xxxx</span><br><span class="indent">xxxx</span> |
| 28 </div> |
| 29 <br> |
| 30 <div> |
| 31 xxxx <span class="indent">xxxx</span> <span class="indent">xxxx</span> |
| 32 </div> |
| 33 <br> |
| 34 <div> |
| 35 xxxx<br>xxxx<br>xxxx |
| 36 </div> |
| 37 <br> |
| 38 <div> |
| 39 xxxx <span class="indent">xxxx</span><br>xxxx |
| 40 </div> |
36 </body> | 41 </body> |
37 </html> | 42 </html> |
OLD | NEW |