OLD | NEW |
1 <body style="-webkit-writing-mode: vertical-rl; overflow: hidden;"> | 1 <!DOCTYPE html> |
2 <div style="-webkit-columns: 3; -webkit-column-rule: 4px solid maroon; padding:
10px 0; border:5px solid black"> | 2 <style> |
3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla varius enim ac m
i. Curabitur sollicitudin felis quis lectus. Quisque adipiscing rhoncus sem. Pro
in nulla purus, vulputate vel, varius ut, euismod et, nisi. Sed vitae felis vel
orci sagittis aliquam. Cras convallis adipiscing sem. Nam nonummy enim. Nullam b
ibendum lobortis neque. Vestibulum velit orci, tempus euismod, pretium quis, int
erdum vitae, nulla. Phasellus eget ante et tortor condimentum vestibulum. | 3 body { |
4 Suspendisse hendrerit quam nec felis. Sed varius turpis vitae pede. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Proin bibendum justo ac enim. Clas
s aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hym
enaeos. Sed leo nulla, rutrum eu, dictum ut, posuere vel, arcu. Nam libero. Morb
i orci. Maecenas pellentesque. Curabitur erat erat, ullamcorper at, gravida vita
e, iaculis vitae, elit. Nullam quam. Quisque orci lectus, ullamcorper eu, imperd
iet sed, accumsan et, ligula. Duis diam nisl, sagittis a, blandit volutpat, inte
rdum sed, velit. Vestibulum quam. | 4 -webkit-writing-mode: vertical-rl; |
5 Nulla a purus. Phasellus semper semper lectus. Nulla porttitor, dolor dictum sce
lerisque luctus, velit ipsum lobortis mauris, ac pretium enim nunc vel risus. Pr
oin gravida mi ut sem cursus mattis. Fusce laoreet, nisi quis luctus volutpat, a
rcu pede tincidunt enim, nec malesuada urna nisl eu enim. Vivamus varius augue a
c purus. Vestibulum vestibulum. Phasellus et est vitae ante accumsan rhoncus. Mo
rbi convallis, arcu at hendrerit gravida, sem diam dignissim risus, sed aliquet
erat mi ut mi. Nunc cursus lacinia elit. | 5 } |
6 Nunc nisi. Quisque at erat. Vestibulum dictum quam vitae nibh. Nunc vitae ante n
on odio interdum blandit. Curabitur leo quam, fermentum sed, feugiat in, ullamco
rper id, nibh. Suspendisse ac turpis. In iaculis sollicitudin dui. Aenean vitae
lectus vitae nulla pellentesque sollicitudin. Nunc gravida pharetra lectus. Etia
m lacus ligula, placerat ut, dictum vitae, tempus vel, risus. Cras rhoncus. Prae
sent varius ultricies orci. Donec mattis, neque ut ornare fringilla, ante urna p
lacerat eros, vel commodo nisi tortor ut mauris. Morbi magna dui, sagittis sit a
met, tincidunt et, elementum eget, quam. Fusce molestie nisl vitae nisi. | 6 .multicol { |
7 Vestibulum a sapien. Phasellus ante lacus, vehicula non, cursus a, tempor ut, ma
gna. Suspendisse potenti. Fusce aliquet, odio viverra vulputate dictum, enim odi
o luctus purus, ut scelerisque quam nulla non est. Donec eros lacus, egestas vit
ae, lacinia quis, tempor quis, pede. Morbi orci erat, iaculis id, ornare ac, ele
mentum at, sem. Nunc ornare sodales nisi. Morbi interdum commodo nisl. Fusce ege
t eros non nisi ornare facilisis. Sed placerat, est non posuere posuere, purus s
em dignissim libero, a viverra tellus dolor vel lorem. Cras augue. Etiam ultrici
es consequat odio. Mauris ac libero. Etiam posuere, libero vitae euismod gravida
, urna elit imperdiet magna, vel cursus elit felis non mauris. Donec orci erat,
porta id, dignissim ut, posuere dictum, leo. Suspendisse scelerisque egestas nul
la. | 7 height: 470px; |
| 8 -webkit-columns: 3; |
| 9 -webkit-column-rule: 4px solid maroon; |
| 10 -webkit-column-gap: 10px; |
| 11 padding: 10 0px; |
| 12 border: 5px solid black; |
| 13 line-height: 20px; |
| 14 } |
| 15 </style> |
| 16 <div class="multicol"> |
| 17 Line 1<br> |
| 18 Line 2<br> |
| 19 Line 3<br> |
| 20 Line 4<br> |
| 21 Line 5<br> |
| 22 Line 6<br> |
| 23 Line 7<br> |
| 24 Line 8<br> |
| 25 Line 9<br> |
| 26 Line 10<br> |
| 27 Line 11<br> |
| 28 Line 12<br> |
| 29 Line 13<br> |
| 30 Line 14<br> |
| 31 Line 15<br> |
| 32 Line 16<br> |
| 33 Line 17<br> |
| 34 Line 18<br> |
| 35 Line 19<br> |
| 36 Line 20<br> |
| 37 Line 21<br> |
| 38 Line 22<br> |
| 39 Line 23<br> |
| 40 Line 24<br> |
| 41 Line 25<br> |
| 42 Line 26<br> |
| 43 Line 27<br> |
| 44 Line 28<br> |
| 45 Line 29<br> |
| 46 Line 30<br> |
8 </div> | 47 </div> |
OLD | NEW |