1105268-1-min-max-dimensions-ref.html (931B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 .wrapper { 7 display: inline-block; 8 vertical-align: top; 9 margin: 20px; 10 } 11 .outer { 12 height: 250px; 13 width: 200px; 14 border: 10px solid #ddd; 15 } 16 .inner { 17 font: 12px monospace; 18 background: yellow; 19 overflow: hidden; 20 } 21 .test1 { 22 width: 180px; 23 height: 150px; 24 } 25 .test2 { 26 width: 150px; 27 height: 200px; 28 } 29 .lr { 30 writing-mode: vertical-lr; 31 } 32 .rl { 33 writing-mode: vertical-rl; 34 } 35 </style> 36 37 </head> 38 39 <body> 40 41 <div class="wrapper"> 42 <div class="outer"> 43 <div class="inner test1 lr"> 44 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 45 </div> 46 </div> 47 </div> 48 49 <br> 50 51 <div class="wrapper"> 52 <div class="outer"> 53 <div class="inner test2 lr"> 54 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 55 </div> 56 </div> 57 </div> 58 59 </body> 60 </html>