OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <html style="direction:ltr"> | |
3 <head> | |
4 <style> | |
5 p { | |
6 margin-top: 16px; | |
7 margin-bottom: 16px; | |
8 } | |
9 | |
10 .content { | |
11 text-align: justify; | |
12 padding: 5px; | |
13 font-size: 10px; | |
14 font-family: Ahem; | |
15 } | |
16 | |
17 .first-box { | |
18 border: 1px solid blue; | |
19 margin:0 10%; | |
20 } | |
21 | |
22 .second-box { | |
23 margin:10px; | |
24 border: 1px solid green; | |
25 direction:rtl | |
26 } | |
27 | |
28 #region1, #region2, #region3 { | |
29 border: 1px solid black; | |
30 } | |
31 | |
32 #region1 { | |
33 width: 200px; | |
34 height: 100px; | |
35 overflow: hidden; | |
36 } | |
37 | |
38 #region2 { | |
39 width: 300px; | |
40 height: 180px; | |
41 overflow: hidden; | |
42 } | |
43 | |
44 #region3 { | |
45 width: 120px; | |
46 height: 120px; | |
47 } | |
48 </style> | |
49 </head> | |
50 <body> | |
51 <p>The text lines should not overflow the regions. The fragment boxes should res
pect the margin values for their regions.</p> | |
52 <div id="container"> | |
53 <div id="region1"> | |
54 <div class="content"> | |
55 <div class="first-box"> | |
56 <div class="second-box"> | |
57 <p>This line of text should not get out of the region. This
line of text <span style="line-height: 100px;">XXXXXXX</span></p> | |
58 </div> | |
59 </div> | |
60 </div> | |
61 </div> | |
62 <div id="region2"> | |
63 <div class="content" style="margin-top: -33px;"> | |
64 <div class="first-box"> | |
65 <div class="second-box"> | |
66 <p>should not get out of the region. This line of text shoul
d not get out of the region. This line of text should not get out of the region.
</p> | |
67 <p>This line of text should not get out of the region. This
line of text should not get out of the region. This line of text should not get
out of the region. This line of text <span style="line-height: 100px;">XXXXXX</s
pan></p> | |
68 </div> | |
69 </div> | |
70 </div> | |
71 </div> | |
72 <div id="region3"> | |
73 <div class="content" style="overflow: hidden;"> | |
74 <div class="first-box" style="margin-top: -33px;"> | |
75 <div class="second-box"> | |
76 <p>should not get out of the region.</p> | |
77 <p>This line of text should not get out of the region.</p> | |
78 </div> | |
79 </div> | |
80 </div> | |
81 </div> | |
82 </div> | |
OLD | NEW |