You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.</p>
54
+
<ul><li>div.ex1 {
55
+
background-color: lightblue;
56
+
width: 200px;
57
+
height: 220px;
58
+
overflow: scroll;
59
+
}</li><li>
60
+
61
+
div.ex2 {
62
+
background-color: lightblue;
63
+
width: 200px;
64
+
height: 220px;
65
+
overflow: hidden;
66
+
}</li><li>
67
+
68
+
div.ex3 {
69
+
background-color: lightblue;
70
+
width: 200px;
71
+
height: 220px;
72
+
overflow: auto;
73
+
}</li><li>
74
+
75
+
div.ex4 {
76
+
background-color: lightblue;
77
+
width: 200px;
78
+
height: 220px;
79
+
overflow: visible;
80
+
}</li><li>
81
+
span.internalScroll {
82
+
background-color: magenta;
83
+
overflow: scroll;
84
+
}</li><li>
85
+
span.internalAuto {
86
+
background-color: magenta;
87
+
overflow: auto;
88
+
}</li><li>
89
+
span.internalHidden {
90
+
background-color: magenta;
91
+
overflow: hidden;
92
+
}</li><li>
93
+
span.internalVisible {
94
+
background-color: magenta;
95
+
overflow: visible;
96
+
}</li></ul>
97
+
<h2>overflow: scroll for div, </h2>
98
+
<divclass="ex1">internal span Scroll: <spanclass="internalScroll">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
99
+
100
+
<br><divclass="ex1">internal span Auto: <spanclass="internalAuto">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
101
+
<br><divclass="ex1">internal span Hidden: <spanclass="internalHidden">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
102
+
<br><divclass="ex1">internal span Visible: <spanclass="internalVisible">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
103
+
104
+
<h2>overflow: hidden:</h2>
105
+
<divclass="ex2">internal span Scroll: <spanclass="internalScroll">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
106
+
107
+
<br><divclass="ex2">internal span Auto: <spanclass="internalAuto">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
108
+
<br><divclass="ex2">internal span Hidden: <spanclass="internalHidden">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
109
+
<br><divclass="ex2">internal span Visible: <spanclass="internalVisible">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
110
+
111
+
<h2>overflow: auto:</h2>
112
+
<divclass="ex3">internal span Scroll: <spanclass="internalScroll">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
113
+
114
+
<br><divclass="ex3">internal span Auto: <spanclass="internalAuto">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
115
+
<br><divclass="ex3">internal span Hidden: <spanclass="internalHidden">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
116
+
<br><divclass="ex3">internal span Visible: <spanclass="internalVisible">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
117
+
118
+
<h2>overflow: visible (default):</h2>
119
+
<divclass="ex4">internal span Scroll: <spanclass="internalScroll">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
120
+
<br>
121
+
<br><br><divclass="ex4">internal span Auto: <spanclass="internalAuto">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
122
+
<br><br><br><divclass="ex4">internal span Hidden: <spanclass="internalHidden">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
123
+
<br><br><br><divclass="ex4">internal span Visible: <spanclass="internalVisible">Some text is hereherehereherehereherehhhhhhhh 1 and hereherehereherehereherehhhhhhhh</span> should be magenta color for internal span, lightblue for parent div </div>
<p>NORMAL: Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.</p>
16
+
<tablestyle="width: 400pt;">
17
+
<tr>
18
+
<tdwidth="99%">white-space: normal;</td>
19
+
<tdstyle="white-space: normal;"> Whitespace character is < > here. non-breaking space < > here. OGHAM
20
+
SPACE MARK < > here. 2BR <<br><br>> here. CR(Carriage return (slash r) < >) and LF(Line feed
21
+
(slash n) or < > here).
22
+
CR LF < > here. LF CR < > here.Some very long text is here also. Some very long text is
23
+
here also. Some very long text is here also.
24
+
</td>
25
+
</tr>
26
+
</table>
27
+
<br>
28
+
<p>NOWRAP: Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.</p>
29
+
<tablestyle="width: 400pt;">
30
+
<tr>
31
+
<tdstyle="width: 99%">white-space: nowrap;</td>
32
+
<tdstyle="white-space: nowrap;">Whitespace character is < > here. non-breaking space < > here. OGHAM
33
+
SPACE MARK < > here. 2BR <<br><br>> here. CR(Carriage return (slash r) < >) and LF(Line feed
34
+
(slash n) or < > here).
35
+
CR LF < > here. LF CR < > here.Some very long text is here also. Some very long text is
36
+
here also. Some very long text is here also.
37
+
</td>
38
+
</tr>
39
+
</table>
40
+
<br>
41
+
<p>PRE: Sequences of white space are preserved. Lines are only broken at newline characters in the source and at br elements.</p>
42
+
<tablestyle="width: 400pt;">
43
+
<tr>
44
+
<tdwidth="99%">white-space: pre;</td>
45
+
<tdstyle="white-space: pre;"> Whitespace character is < > here. non-breaking space < > here. OGHAM
46
+
SPACE MARK < > here. 2BR <<br><br>> here. CR(Carriage return (slash r) < >) and LF(Line feed
47
+
(slash n) or < > here).
48
+
CR LF < > here. LF CR < > here.Some very long text is here also. Some very long text is
49
+
here also. Some very long text is here also.
50
+
</td>
51
+
</tr>
52
+
</table>
53
+
<br>
54
+
<p>PRE-WRAP: Sequences of white space are preserved. Lines are broken at newline characters, at br, and as necessary to fill line boxes.</p>
55
+
<tablestyle="width: 400pt;">
56
+
<tr>
57
+
<tdwidth="99%">white-space: pre-wrap;</td>
58
+
<tdstyle="white-space: pre-wrap;"> Whitespace character is < > here. non-breaking space < > here. OGHAM
59
+
SPACE MARK < > here. 2BR <<br><br>> here. CR(Carriage return (slash r) < >) and LF(Line feed
60
+
(slash n) or < > here).
61
+
CR LF < > here. LF CR < > here.Some very long text is here also. Some very long text is
62
+
here also. Some very long text is here also.
63
+
</td>
64
+
</tr>
65
+
</table>
66
+
<br>
67
+
<p>PRE-LINE: Sequences of white space are collapsed. Lines are broken at newline characters, at br, and as necessary to fill line boxes.</p>
68
+
<tablestyle="width: 400pt;">
69
+
<tr>
70
+
<tdwidth="99%">white-space: pre-line;</td>
71
+
<tdstyle="white-space: pre-line;"> Whitespace character is < > here. non-breaking space < > here.
72
+
OGHAM SPACE MARK < > here. 2BR <<br><br>> here. CR(Carriage return (slash r) < >) and LF(Line feed
73
+
(slash n) or < > here).
74
+
CR LF < > here. LF CR < > here.Some very long text is here also. Some very long text is
0 commit comments