| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <title>Testing Widows and Orphans</title> | 4 <title>Testing Widows and Orphans</title> |
| 5 <style> | 5 <style> |
| 6 body.hide-containers .container { | 6 body.hide-containers .container { |
| 7 display: none; | 7 display: none; |
| 8 } | 8 } |
| 9 | 9 |
| 10 .container { | 10 .container { |
| 11 width: 600px; | 11 width: 600px; |
| 12 height: 200px; | 12 height: 200px; |
| 13 -webkit-columns: 3; | 13 -webkit-columns: 3; |
| 14 columns: 3; | 14 columns: 3; |
| 15 column-fill: auto; | 15 column-fill: auto; |
| 16 line-height: 20px; /* 10 lines per page */ | 16 line-height: 20px; /* 10 lines per page */ |
| 17 font-size: 16px; | 17 font-size: 16px; |
| 18 margin: 0 0 20px 0; | 18 margin: 0 0 20px 0; |
| 19 padding: 0; | 19 padding: 0; |
| 20 overflow: hidden; | 20 overflow: hidden; |
| 21 orphans: 1; |
| 22 widows: 1; |
| 21 } | 23 } |
| 22 | 24 |
| 23 .block { | 25 .block { |
| 24 margin: 0 0 15px 0; | 26 margin: 0 0 15px 0; |
| 25 padding: 0; | 27 padding: 0; |
| 26 } | 28 } |
| 27 | 29 |
| 28 .top { | 30 .top { |
| 29 color: red; | 31 color: red; |
| 30 } | 32 } |
| (...skipping 166 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 197 </script> | 199 </script> |
| 198 </head> | 200 </head> |
| 199 <body> | 201 <body> |
| 200 <p> | 202 <p> |
| 201 Testing widows and orphans. Any green lines | 203 Testing widows and orphans. Any green lines |
| 202 should be at the bottom of pages/columns, and any red lines | 204 should be at the bottom of pages/columns, and any red lines |
| 203 should be at the top of pages/columns. | 205 should be at the top of pages/columns. |
| 204 </p> | 206 </p> |
| 205 </body> | 207 </body> |
| 206 </html> | 208 </html> |
| OLD | NEW |