{overflow-x : auto;} ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Π»ΠΈ ΠΎΠ½ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ?
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ ΡΠ΅ΡΠΊΠ° div-ΡΡΠΈΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΡΡ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ ΠΈ ΡΠΈΡΠΈΠ½Π΅: http://jsfiddle.net/9cnDS/
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½Ρ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ overflow-x:auto, Π½ΠΎ ΠΎΠ½ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½Ρ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ?..
{{Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅}} Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π½Π° 1 ΡΡΡΠΎΠΊΠ΅, ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΠΏΠΎΠ»Ρ, ΡΠ΅ΠΊΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ
<div>
<div>
<div>
<blockquote>
<div>{{message}}</div>
</blockquote>
</div>
</div>
</div>
ΠΠΎΡ css:
.col2 {
width: 65%;
height:100%;
}
.box9 {
height:15%;
overflow-x: auto;
}
.moreLeft {
margin-left: -2%;
}
.message {
padding-top: 3.5%;
text-align: center;
}
blockquote {
height: 40px;
width: auto;
padding: 5px 10px;
margin: 0 0 20px;
font-size: 1. 5vw;
border-left: 11px solid #000;
}
html
css
overflow ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΠΡΡΠΎΡΠ½ΠΈΠΊ StackThis Β Β 11 Π°ΠΏΡΠ΅Π»Ρ 2014 Π² 19:51
3 ΠΎΡΠ²Π΅ΡΠ°
- ΠΠΌΠΈΡΠ°ΡΠΈΡ ‘ overflow-y: auto; overflow-x: visible` Π½Π° ΡΠΎΡΡΠΈΡΡΠ΅ΠΌΠΎΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΠ΅ jQuery UI
ΠΠΎΡ jsFiddle, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΡΡΠ½ΠΎ Π²ΠΈΠ΄Π΅ΡΡ ΡΠΎ, ΡΡΠΎ Ρ ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ ΠΎΠΏΠΈΡΠ°ΡΡ: http://jsfiddle.net/c26SK/5 / Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π΄Π²Π΅ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ. ΠΠ΅Π²Π°Ρ ΡΡΠΊΠ° Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π° ΠΏΡΠ΅Π΄ΠΌΠ΅ΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΡ Π² ΠΏΡΠ°Π²ΡΡ ΠΊΠΎΡΠΎΠ±ΠΊΡ. ΠΡΠ΅Π΄ΠΌΠ΅ΡΡ Π² ΠΏΡΠ°Π²ΠΎΠΌ ΡΡΠΈΠΊΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΡΠ°Π²ΠΈΡΡ. ΠΡΠ΅Π΄ΠΌΠ΅ΡΡ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ. ΠΠ±Π΅ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΠΈΠΌΠ΅ΡΡ…
- ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-X ΠΎΡΡΠ΅Π·Π°Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ΅Π±Π΅Π½ΠΊΠ°
Π ΡΡΠΎΠΌ jsbin Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π΅Π»Π΅Π½ΡΠΉ <div> ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΡΠ²Π΅ΡΡ Ρ, ΠΊΠΎΠ³Π΄Π° Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Ρ overflow-x: auto Π½Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠΎΡΠ΅ΠΌΡ? ΠΠ°ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, overflow-y -ΡΡΠΎ Π²ΡΠ΅ Π΅ΡΠ΅ visible , ΡΠ°ΠΊ ΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π²ΠΈΠ΄Π½ΠΎ. #red { width: 300px; height: 100px; background: red;…
3
ΠΠ΅ ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Π²Ρ ΠΏΡΡΠ°Π΅ΡΠ΅ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ, Π½ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ white-space: nowrap
.box9 {
overflow-x: auto;
white-space: nowrap;
}
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Kevin Boucher Β Β 11 Π°ΠΏΡΠ΅Π»Ρ 2014 Π² 19:58
2
.box9 {
overflow: hidden;
overflow-x: auto;
white-space: nowrap;
}
ΠΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ Π²Π°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ iamnotsam Β Β 11 Π°ΠΏΡΠ΅Π»Ρ 2014 Π² 20:07
1
. box9 {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Core972 Β Β 11 Π°ΠΏΡΠ΅Π»Ρ 2014 Π² 20:01
- ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
Π― ΠΏΡΡΠ°ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π°ΠΉΠ΄Π΅Ρ Π΄Π»Ρ ΡΠ²ΠΎΠ΅ΠΉ Π³Π°Π»Π΅ΡΠ΅ΠΈ. ΠΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ Ρ css Π΅ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΊΠΎΠ³Π΄Π° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. (ΠΠ½Π΅ Π½ΡΠΆΠ΅Π½ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ»Π°ΠΉΠ΄Π΅Ρ, Π° Π½Π΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ scroll) ΠΠΎΡ fiddle : ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π²Π·Π³Π»ΡΠ½ΠΈΡΠ΅. .testimg{ height: 100%; width: 100%; } #testDiv{ width: 400px;…
- overflow-y ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ overflow-x
ΠΠ½Π΅ Π½ΡΠΆΠ΅Π½ div , ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ. Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ (inner div s) ΠΈΠΌΠ΅Π΅Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ, ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΌΠ΅Π½Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ, ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Π²Π½Π΅ΡΠ½ΠΈΡ Π³ΡΠ°Π½ΠΈΡ div . ΠΠΎΡ ΡΠ°ΠΊ: ΠΠΎ ΠΊΠΎΠ³Π΄Π° Ρ ΡΠ΅Π» overflow-x: scroll; overflow-y: visible; ΠΌΠΎΠΈ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΡΠΏΠΈΡΠΊΠΈ Π½Π΅…
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° overflow-x: hidden Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΠΎΠ³Π΄Π° Ρ ΡΠΊΠ°Π·ΡΠ²Π°Ρ overflow-x: hidden Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΡΠ°ΠΊ ΠΈ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΡΠΊΡΡΡΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ.
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ x ΠΈ y?
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ div-Π½Π°Π±ΠΎΡ Π΄Π»Ρ ΡΠΊΡΡΡΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ overflow-x ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ( visible ) Ρ ΠΏΠΎΠΌΠΎΡΡΡ overflow-y . Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π΅ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΌΠ½Π΅ Π±Ρ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ. ΠΠ½ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ…
HTML/CSS Π²Π·Π»ΠΎΠΌΠ°ΡΡ Π΄ΠΎΠΏΡΡΡΠΈΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ-Ρ : Π°Π²ΡΠΎ & ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-ΠΉ: Π²ΠΈΠ΄Π½ΠΎ?
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ div 400px x 400px, ΠΊΠΎΡΠΎΡΡΠΉ Ρ Ρ ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ. ΠΠΎΡΡΠΎΠΌΡ Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Ρ overflow-y: auto. ΠΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Ρ Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΠΈ div Π±ΡΠ»ΠΎ overflow-x:visible. ΠΡΠΎ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ….
ΠΠΌΠΈΡΠ°ΡΠΈΡ ‘ overflow-y: auto; overflow-x: visible` Π½Π° ΡΠΎΡΡΠΈΡΡΠ΅ΠΌΠΎΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΠ΅ jQuery UI
ΠΠΎΡ jsFiddle, ΡΡΠΎΠ±Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ ΡΡΠ½ΠΎ Π²ΠΈΠ΄Π΅ΡΡ ΡΠΎ, ΡΡΠΎ Ρ ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ ΠΎΠΏΠΈΡΠ°ΡΡ: http://jsfiddle.net/c26SK/5 / Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π΄Π²Π΅ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ. ΠΠ΅Π²Π°Ρ ΡΡΠΊΠ° Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π° ΠΏΡΠ΅Π΄ΠΌΠ΅ΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΡ Π² ΠΏΡΠ°Π²ΡΡ…
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-X ΠΎΡΡΠ΅Π·Π°Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ΅Π±Π΅Π½ΠΊΠ°
Π ΡΡΠΎΠΌ jsbin Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π·Π΅Π»Π΅Π½ΡΠΉ <div> ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΡΠ²Π΅ΡΡ Ρ, ΠΊΠΎΠ³Π΄Π° Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Ρ overflow-x: auto Π½Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠΎΡΠ΅ΠΌΡ? ΠΠ°ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, overflow-y -ΡΡΠΎ Π²ΡΠ΅ Π΅ΡΠ΅…
ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
Π― ΠΏΡΡΠ°ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π°ΠΉΠ΄Π΅Ρ Π΄Π»Ρ ΡΠ²ΠΎΠ΅ΠΉ Π³Π°Π»Π΅ΡΠ΅ΠΈ. ΠΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ Ρ css Π΅ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΊΠΎΠ³Π΄Π° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. (ΠΠ½Π΅ Π½ΡΠΆΠ΅Π½ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ»Π°ΠΉΠ΄Π΅Ρ, Π° Π½Π΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ scroll) ΠΠΎΡ…
overflow-y ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ overflow-x
ΠΠ½Π΅ Π½ΡΠΆΠ΅Π½ div , ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ. Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ (inner div s) ΠΈΠΌΠ΅Π΅Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ, ΠΈ ΠΊΠΎΠ³Π΄Π° ΠΌΠ΅Π½Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ, ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Π²Π½Π΅ΡΠ½ΠΈΡ …
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ div ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΠ»ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ, Π° Π½Π΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ?
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ΅ΠΊΡΡ, ΠΈ Ρ Ρ ΠΎΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° ΡΠ°ΡΡΠΈΡΡΠ»Π°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ, Π° Π½Π΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ, Ρ Π·Π½Π°Ρ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ overflow:…
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ overflow-y Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ overflow-x Π½Π° auto?
Π― Π·Π½Π°Ρ, ΡΡΠΎ ΡΡΠΎ Π΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π²ΠΎΠΏΡΠΎΡ. Π Π½ΠΈΠΆΠ΅ Π‘ΡΡΠ»ΠΊΠ° — ΡΡΠΎ ΠΎΡΠ²Π΅Ρ, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π±Π»ΠΈΠ·ΠΊΠΈΠΉ ΠΊ ΠΌΠΎΠ΅ΠΌΡ Π²ΠΎΠΏΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ Π½Π°ΡΠ΅Π». CSS ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-Ρ : Π²ΠΈΠ΄Π½ΠΎ; ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-ΠΉ: ΡΠΊΡΡΡΡΠΉ; Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ…
overflow-x ΠΈ overflow-y Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ bootstraptable ΠΈ ΠΏΡΡΠ°ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΡΠ΅ΠΉΠΊΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π²Π½ΠΈΠ· (Ρ. Π΅. overflow-y). ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ bootstraptable css ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ overflow: hidden…
overflow-x | CSS (ΠΡΠΈΠΌΠ΅ΡΡ)
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x
ΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, Π΅ΡΠ»ΠΈ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΈ Π²ΡΡ
ΠΎΠ΄ΠΈΡ Π·Π° ΠΎΠ±Π»Π°ΡΡΡ ΡΠΏΡΠ°Π²Π° ΠΈΠ»ΠΈ ΡΠ»Π΅Π²Π° ΠΎΡ Π±Π»ΠΎΠΊΠ°.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
/* Content is not clipped */
overflow-x: visible;
/* Content is clipped, with no scrollbars */
overflow-x: hidden;
/* Content is clipped, with scrollbars */
overflow-x: scroll;
/* Let the browser decide */
overflow-x: auto;
/* Global values */
overflow-x: inherit;
overflow-x: initial;
overflow-x: unset;
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
visible
- ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π²ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΄Π°ΠΆΠ΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ.
hidden
- ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ±Π»Π°ΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΊΡΡΡΠΎ.
scroll
- ΠΡΠ΅Π³Π΄Π° Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
auto
- ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ-ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: visible
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ Π±Π»ΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ
Π‘ΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>overflow-x</title>
<style>
.layer {
overflow-x: scroll; /* ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ */
width: 300px; /* Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° */
height: 150px; /* ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° */
padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */
border: solid 1px black; /* ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ°ΠΌΠΊΠΈ */
white-space: nowrap; /* ΠΠ°ΠΏΡΠ΅ΡΠ°Π΅ΠΌ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΡΡΠΎΠΊ */
}
</style>
</head>
<body>
<div>
<h3>ΠΠ΅ΡΠ΅ΡΠΎΠ³Π΅Π½Π½ΡΠΉ Π³ΠΎΠ»ΡΠ±ΠΎΠΉ Π³Π΅Π»Ρ</h3>
<p>
ΠΠΎΠ½Π΄ΡΠΊΡΠΎΠΌΠ΅ΡΡΠΈΡ ΠΌΡΠ³ΠΊΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ±
ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠΉ ΠΏΡΠΎΠ½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΡ
ΠΌΠ΅ΡΠΈΠ»ΠΊΠ°ΡΠ±ΠΈΠΎΠ»Π° Π²Π½ΡΡΡΡ.
</p>
</div>
</body>
</html>
ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΠ΅ ΡΠ΅ΠΊΡΡ Π² Π±Π»ΠΎΠΊ div, ΡΠΎ ΡΠΈΡΠΈΠ½Π° ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΎΠ±Π»Π°ΡΡΠΈ, ΠΎΡ Π²Π°ΡΡΠ²Π°Π΅ΠΌΠΎΠΉ ΡΠ΅ΠΊΡΡΠΎΠΌ. ΠΠΎ Π΅ΡΠ»ΠΈ Π·Π°Π΄Π°ΡΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΠΈΠ»ΠΈ Π²ΡΡΠΎΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΏΠΈΡΠ°ΡΡΡΡ Π² Π½Π΅Π³ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ.
ΠΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠΎΠΆΠ½ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ Π±Π»ΠΎΠΊΠ°, Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow hidden.
visible: Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ½ΠΎ Π·Π°Π΄Π°Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π½Π΅ Π±Π»ΠΎΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π΅ Β«Π·Π°ΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡΒ» ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²Π½ΡΡΡΡ Π±Π»ΠΎΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
hidden: ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π²ΡΡ ΠΎΠ΄ΡΡΠ΅Π΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ Π±Π»ΠΎΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π±ΡΠ΄Π΅Ρ ΡΠΊΡΡΡΠΎ.
scroll: Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈ ΡΠΊΡΡΠ²Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π²ΡΡ ΠΎΠ΄ΡΡΠ΅Π΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ Π±Π»ΠΎΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
auto: Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π΅ΡΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ.
initial: ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
inherit: ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΎ Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π’Π΅ΠΏΠ΅ΡΡ ΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΡΡΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
overflow: visible β ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΡ ΠΎΠ΄ΠΈΡΡ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΏΡΠ΅Π²ΡΡΠ°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΡΡ ΠΎΠ΄ΡΡΠ΅Π΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ.
HTML
<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget condimentum sapien. Nam in ligula molestie, laoreet neque cursus, dapibus felis. Donec ut malesuada ipsum, id euismod lacus. Quisque et mauris faucibus, sodales ligula id, volutpat dolor. Aenean id tortor lectus. </div>
CSS
#box { width: 200px; height: 100px; background-color: #FD2D0F; overflow: visible; }
Π¨ΠΈΡΠΈΠ½Π° ΠΈ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° div ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° Π½Π° 200px ΠΈ 100px. ΠΡΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π±Π»ΠΎΠΊΠ°, ΡΠΎ ΠΎΠ½ΠΎ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π΅Π»Ρ.
Overflow: hidden CSS ΡΠΊΡΡΠ²Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π²ΡΡ ΠΎΠ΄ΡΡΠ΅Π΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
ΠΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ overflow: scroll Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Π½ΠΈΠΆΠ΅ Π΄Π΅ΠΌΠΎ-Π²Π΅ΡΡΠΈΠΈ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ Π΄Π»Ρ ΠΎΠ±ΠΎΠΈΡ Π±Π»ΠΎΠΊΠΎΠ², Π΄Π°ΠΆΠ΅ ΠΊΠΎΠ³Π΄Π° ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π½Π΅ ΠΏΡΠ΅Π²ΡΡΠ°ΡΡ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ Π²ΡΠΎΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡ ΠΎΠΆΠ΅ Π½Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ scroll, Π½ΠΎ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ. Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ Π½ΠΈΠΆΠ΅ Π΄Π΅ΠΌΠΎ-Π²Π΅ΡΡΠΈΠΈ overflow: auto Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ Π΅Π³ΠΎ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ°. Π Π²ΠΎ Π²ΡΠΎΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ.
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π²ΡΡ ΠΎΠ΄ΡΡΠ΅Π΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π²Π° Π΄ΡΡΠ³ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΎ ΠΊΠΎΡΠΎΡΡΡ ΡΠ΅ΡΡ ΠΏΠΎΠΉΠ΄Π΅Ρ Π½ΠΈΠΆΠ΅.
Π‘Π²ΠΎΠΉΡΡΠ²Π° overflow-x hidden ΠΈ overflow-yΒ Π·Π°Π΄Π°ΡΡ, ΠΊΠ°ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π²ΡΡ ΠΎΠ΄ΡΡΠ΅Π΅ Π·Π° ΡΠ°ΠΌΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ. ΠΠ»Ρ Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ Π²ΡΠ΅ ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ Π²ΡΡΠ΅.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΡ.
HTML
<div> <div></div> </div>
ΠΡΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ β 250 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠΎ Π·Π°Π΄Π°Π² Π΄Π»Ρ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° overflow-x: auto, ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² Π½Π΅Π³ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠΈΡΠΈΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°.
ΠΡΠ»ΠΈ Π²ΡΡΠΎΡΠ° Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π° Π²ΡΡΠΎΡΠ° Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° β 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠΎ overflow-y: auto Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ ΠΎΠ΄Π½ΠΎ ΡΠ»ΠΎΠ²ΠΎ ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΠΈ Π²Ρ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅ Π½ΠΈ ΡΠΊΡΡΠ²Π°ΡΡ Π²ΡΡ ΠΎΠ΄ΡΡΠΈΠΉ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠ΅ΠΊΡΡ, Π½ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·Π±ΠΈΡΡ ΡΠ»ΠΎΠ²ΠΎ ΠΈ ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΈ Π΅Π³ΠΎ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ word-wrap, ΡΠΊΠ°Π·Π°Π² Π΄Π»Ρ Π½Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ break-word.
HTML
<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisquegegetcondimentumsapien.Namin ligula molestie, laoreet neque cursus. </div>
CSS
#box { width: 200px; height: 100px; background-color: #FD2D0F; }
ΠΡΠ»ΠΈ ΠΌΡ ΡΠΊΠ°ΠΆΠ΅ΠΌ word-wrap: break-word, Π²ΡΡ ΠΎΠ΄ΡΡΠ΅Π΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠ»ΠΎΠ²ΠΎ ΡΠ°Π·Π±ΠΈΠ²Π°Π΅ΡΡΡ Π½Π° Π΄Π²Π°, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΠΌΠΎΠ³Π»ΠΎ Π²ΠΏΠΈΡΠ°ΡΡΡΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° body overflow hidden.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . IE 4-6 ΡΠ°ΡΡΠΈΡΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π» ΡΠΈΡΠΈΠ½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΎΠΌ ΡΡΠ°ΡΡΠΈ Β«CSS overflow PropertyΒ» , ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½Π°Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΠ΅ΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
Overflow CSS ΡΡΠΎΠΊΠΈ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ Π°ΠΊΠ°Π΄Π΅ΠΌΠΈΡ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS overflow
ΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π²Π΅Π»ΠΈΠΊΠΎ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ.
This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
CSS Overflow
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow
ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ Π²ΡΡΠ΅Π·Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ»ΠΈΡΠΊΠΎΠΌ Π²Π΅Π»ΠΈΠΊΠΎ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow
ΠΈΠΌΠ΅Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
visible
— ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ. ΠΠ½ Π²ΡΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅ΡΡΡ Π²Π½Π΅ ΠΏΠΎΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°hidden
— ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, Π° ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±ΡΠ΄Π΅Ρ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠΌscroll
— ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, Π½ΠΎ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈauto
— ΠΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΎΡΡΠ°Π²ΡΠ΅ΠΉΡΡ ΡΠ°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow
ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π±Π»ΠΎΠΊΠ° Ρ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π OS X Lion (Π½Π° Mac) ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠΊΡΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ (Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π·Π°Π΄Π°Π½ΠΎ «ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°»).
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: Π²ΠΈΠ΄ΠΈΠΌΡΠΉ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ visible
, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΎΠ½ΠΎ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π²Π½Π΅ ΠΏΠΎΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π΅ΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠ»ΡΡΡΠΈΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΏΠΎΠ»Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ
div {
Β Β Β width: 200px;
Β Β Β height:
50px;
Β Β Β background-color: #eee;
Β Β Β
overflow: visible;
}
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΡΠΊΡΡΡΡΠΉ
ΠΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ hidden
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, Π° ΠΎΡΡΠ°Π²ΡΠ°ΡΡΡ ΡΠ°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ:
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π΅ΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠ»ΡΡΡΠΈΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΏΠΎΠ»Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ
div {
Β Β Β overflow: hidden;
}
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΡ scroll
, ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΠΈ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ Π²Π½ΡΡΡΠΈ ΠΎΠΊΠ½Π°. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠ°ΠΊ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ, ΡΠ°ΠΊ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ (Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΎΠ½Π° Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½Π°):
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π΅ΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠ»ΡΡΡΠΈΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΏΠΎΠ»Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ
div {
Β Β Β overflow: scroll;
}
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΠΠ²ΡΠΎ
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ auto
Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ scroll
, ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ:
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π΅ΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠ»ΡΡΡΠΈΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΏΠΎΠ»Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ
div {
Β Β Β overflow: auto;
}
overflow-x ΠΈ overflow-y
Π‘Π²ΠΎΠΉΡΡΠ²Π° overflow-x
ΠΈ overflow-y
ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ overflow ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈΠ»ΠΈ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ (ΠΈΠ»ΠΈ ΠΎΠ±Π°):
overflow-x
Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ Ρ Π»Π΅Π²ΡΠΌΠΈ/ΠΏΡΠ°Π²ΡΠΌΠΈ ΠΊΡΠ°ΡΠΌΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. overflow-y
Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ Ρ Π²Π΅ΡΡ
Π½ΠΈΠΌΠΈ/Π½ΠΈΠΆΠ½ΠΈΠΌΠΈ ΠΊΡΠ°ΡΠΌΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π΅ΡΠ»ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠ»ΡΡΡΠΈΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΏΠΎΠ»Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ
div {
Β Β Β overflow-x: hidden; /* Hide horizontal scrollbar
*/
Β Β Β
overflow-y: scroll; /* Add vertical scrollbar */
}
ΠΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ CSS
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ | Description |
---|---|
overflow | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΎ ΠΏΠΎΠ»Π΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
overflow-x | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ Ρ Π»Π΅Π²ΡΠΌΠΈ/ΠΏΡΠ°Π²ΡΠΌΠΈ ΠΊΡΠ°ΡΠΌΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΎ ΠΎΠ±Π»Π°ΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
overflow-y | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ Ρ Π²Π΅ΡΡ Π½ΠΈΠΌΠΈ/Π½ΠΈΠΆΠ½ΠΈΠΌΠΈ ΠΊΡΠ°ΡΠΌΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΎ ΠΎΠ±Π»Π°ΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° |
CSS Scroll Snap β ΠΌΠΎΡΠ½ΠΎΠ΅ ΡΡΠ΅Π΄ΡΡΠ²ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Π±Π΅Π· JavaScript
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ β Π΅Π³ΠΎ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π²ΠΈΠ΄Π½ΠΎ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Π±Π»ΠΎΠΊΠ°. ΠΡΠ° Π·Π°Π΄Π°ΡΠ° ΡΠ΅ΡΠ°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow. ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ auto ΠΈΠ»ΠΈ scroll. ΠΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π°:
See the Pen
Basic Slider by Pochemuta (@pochemuta)
on CodePen.
ΠΠΎΠ»ΡΡΠΈΠ»ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΠ»Π°ΠΉΠ΄Π΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΠΎ ΠΎΠ½ ΠΏΠ»ΠΎΡ ΡΠ΅ΠΌ, ΡΡΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Π΅Π³ΠΎ Π½Π΅Π»ΡΠ·Ρ Π»ΠΈΡΡΠ°ΡΡ ΡΠ²Π°ΠΉΠΏΠΎΠΌ. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅ΡΠ΅Π· Π²Π΅ΡΡ ΡΠΊΡΠ°Π½. ΠΡΠΎ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π½Π΅ ΡΡΠΈΡΡΠ²Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ.
Π Π΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ CSS Scroll Snap. ΠΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ» ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΡ ΠΊΠ»Π°ΡΡΠ½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ· ΡΡΠ°ΡΡΠΈ Practical CSS Scroll Snapping:
ΠΡΠΎΡΡΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ
Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΠΏΠΎΡ ΠΎΠΆΠ΅Π³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² Π½Π°Ρ ΠΊΠΎΠ΄ Π΄Π²Π° ΡΠ²ΠΎΠΉΡΡΠ²Π°: scroll-snap-type ΠΈ scroll-snap-align. ΠΠ΅ΡΠ²ΠΎΠ΅ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π²ΡΠΎΡΠΎΠ΅ β Π΄Π»Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
See the Pen
Scroll Snap by Pochemuta (@pochemuta)
on CodePen.
ΠΡΠ»ΠΈΡΠ½ΠΎ β ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠ»ΠΈΡΡΡΠ²Π°ΡΡ ΡΠ²Π°ΠΉΠΏΠΎΠΌ, Π° Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°ΡΡ ΠΏΠ°Π»ΡΡΠ΅ΠΌ ΡΠ΅ΡΠ΅Π· Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°. ΠΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊΠΈΠ΅ Π΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π°ΡΡ CSS Scroll Snap.
1
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈ ΡΡΡΠΎΠ³ΠΎΡΡΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ scroll-snap-type Π·Π°Π΄Π°ΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΊΠ°Π·Π°ΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (x ΠΈΠ»ΠΈ y), Π° ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠΎΠ³ΠΎΡΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ (none, mandatory ΠΈΠ»ΠΈ proximity).
Π‘ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π²ΡΡ ΠΏΡΠΎΡΡΠΎ:
- Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° β x ΠΈΠ»ΠΈ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ inline:
- Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° β y ΠΈΠ»ΠΈ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΡΠ»ΠΎΠ²ΠΎ block;
- ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° Π² ΠΎΠ±ΠΎΠΈΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡΡ β both.
Π§ΡΡΡ ΡΠ»ΠΎΠΆΠ½Π΅Π΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ°Π·Π½ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ mandatory ΠΈ proximity, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΡΡΠΎΠ³ΠΎΡΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ:
- none β Π½Π΅Ρ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΊ ΡΠΎΡΠΊΠ΅;
- mandatory β ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡΠΎΡΠΊΠ΅;
- proximity β ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ΅Ρ ΡΠΈΡΡΠ°ΡΠΈΡΡ , ΠΊΠΎΠ³Π΄Π° ΠΎΠ±Π»Π°ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π±Π»ΠΈΠ·ΠΊΠΎ ΠΊ ΡΠΎΡΠΊΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ. Π‘ΡΠ΅ΠΏΠ΅Π½Ρ Π±Π»ΠΈΠ·ΠΎΡΡΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ.
ΠΠ»Π°Π²Π½ΡΠΉ ΠΏΠ»ΡΡ mandatory β ΠΏΡΠ΅Π΄ΡΠΊΠ°Π·ΡΠ΅ΠΌΠΎΡΡΡ. ΠΡ Π·Π½Π°Π΅ΡΠ΅, ΡΡΠΎ Π±ΡΠ°ΡΠ·Π΅Ρ ΡΠΎΡΠ½ΠΎ ΡΠΌΠ΅ΡΡΠΈΡ ΠΎΠ±Π»Π°ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΊ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΡΠΎΡΠΊΠ΅. ΠΠ»Π°Π²Π½ΡΠΉ ΠΌΠΈΠ½ΡΡ β Π½Π΅Π³ΠΈΠ±ΠΊΠΎΡΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΡΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅, ΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΎΠΊΠ°ΠΆΡΡΡΡ Π² Π½Π΅ΠΏΡΠΈΡΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ°ΡΠΈΠΈ β ΠΎΠ½ΠΈ ΠΏΡΠΎΡΡΠΎ Π½Π΅ ΡΠΌΠΎΠ³ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡΡΡ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΌΡ ΠΌΠ΅ΡΡΡ, Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΡΡΠ°Π·Ρ ΠΏΠ΅ΡΠ΅ΠΊΠΈΠ΄ΡΠ²Π°ΡΡ ΠΈΡ ΠΊ ΡΠΎΡΠΊΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ.
See the Pen
Scroll Snap mandatory by Pochemuta (@pochemuta)
on CodePen.
Π’Π΅ΠΊΡΡ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΎΠ±Π»Π°ΡΡΠΈ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΏΠΎ Π²ΡΡΠΎΡΠ΅, ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠ΅ ΡΡΡΠΎΡΠΊΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΡΡΠΎΠ³Π°Ρ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΊ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅. Π§ΡΠΎΠ±Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π½Π΅ Π±ΡΠ»ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ mandatory Π½Π° proximity. ΠΠΎ ΠΈ Π·Π΄Π΅ΡΡ ΠΎΡΡΠ°ΡΡΡΡ ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΡ ΠΏΡΠΎΠ»ΠΈΡΡΡΠ²Π°Π½ΠΈΡ β Π²ΡΡ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΠΡΠΎΠ±Π»Π΅ΠΌΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° scroll-padding, ΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΡ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ Π½ΠΈΠΆΠ΅.
2
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΡΠ΅ΠΊ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ scroll-snap-align Π·Π°Π΄Π°ΡΡΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ. ΠΡΠΎ ΡΠ΅ ΡΠ°ΠΌΡΠ΅ ΡΠΎΡΠΊΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ, ΠΏΡΠΎ ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»Π° ΡΠ΅ΡΡ ΠΏΡΠΈ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ mandatory ΠΈ proximity ΡΠ²ΠΎΠΉΡΡΠ²Π° scroll-snap-type. ΠΠΎΡΡΡΠΏΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ scroll-snap-align β start, center ΠΈ end.
Π§ΡΠΎΠ±Ρ Π±ΡΠ»ΠΎ ΠΏΡΠΎΡΠ΅ ΠΏΠΎΠ½ΡΡΡ ΡΠ°Π·Π½ΠΈΡΡ, ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ:
See the Pen
Scroll Snap start, center, end by Pochemuta (@pochemuta)
on CodePen.
Π£ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΈ Π²ΡΠΎΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ start, Ρ ΡΡΠ΅ΡΡΠ΅Π³ΠΎ β center, β Ρ ΡΠ΅ΡΠ²ΡΡΡΠΎΠ³ΠΎ ΠΈ ΠΏΡΡΠΎΠ³ΠΎ β end. ΠΡΠΎΠΊΡΡΡΠΈΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π²Π²Π΅ΡΡ
ΠΈ Π²Π½ΠΈΠ·. ΠΡΠΎΡΠ»Π΅Π΄ΠΈΡΠ΅, ΠΊΠ°ΠΊ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. Start Π² ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ β Π»Π΅Π²ΡΠΉ ΠΊΡΠ°ΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, end β ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°ΠΉ.
3
Π£ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ scroll-snap-stop Π·Π°Π΄Π°ΡΡΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ. ΠΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
- normal β ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ°Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠΎΠΏΡΡΠ΅Π½Ρ;
- always β ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΠΎΡΠΊΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ΅, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠΌΠΎΠΆΠ΅Ρ ΡΠΊΡΠΎΠ»Π»ΠΈΡΡ Π΄Π°Π»ΡΡΠ΅.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ β normal. ΠΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΊΠ»ΡΡΠΈΡΡ Π²Π΅ΡΠΎΡΡΠ½ΠΎΡΡΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠ»ΠΈΡΡΠ½ΡΡ Π²Π°ΠΆΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ always.
4
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΎΡΡΡΡΠΏΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ scroll-padding Π·Π°Π΄Π°ΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΠΎΡΡΡΡΠΏ. ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠΊΡΠ°ΡΡΠ½Π½ΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ: scroll-padding-top/right/bottom/left.
ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΠΎΡΡΡΡΠΏ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π΅Π½, Π΅ΡΠ»ΠΈ Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΡΠΎΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΡΠΎ ΡΠ΅ΡΠ°Π΅Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΡΡ Π²ΡΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ mandatory ΡΠ²ΠΎΠΉΡΡΠ²Π° scroll-snap-type. ΠΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ ΠΏΡΠΎΠ»ΠΈΡΡΡΠ²Π°Π½ΠΈΠΈ ΡΠ²Π΅ΡΡ Ρ ΠΎΡΡΠ°Π²Π°Π»ΠΎΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ ΡΡΡΠΎΠΊ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ° ΡΠ΅ΠΊΡΡΠ°.
See the Pen
Scroll Snap padding by Pochemuta (@pochemuta)
on CodePen.
ΠΡΡ ΠΎΠ΄Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ β Π΅ΡΠ»ΠΈ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π΅ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ. ΠΡΡΡΡΠΏ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·Π±Π°Π²ΠΈΡΡΡΡ ΠΎΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
5
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΎΡΡΡΡΠΏΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ scroll-margin Π·Π°Π΄Π°ΡΡΡΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΠΎΡΡΡΡΠΏ Π΄ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠΊΡΠ°ΡΡΠ½Π½ΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ: scroll-margin-top/right/bottom/left.
See the Pen
Scroll Snap margin by Pochemuta (@pochemuta)
on CodePen.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π·Π΄Π΅ΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΠΎΡΡΡΡΠΏ Π·Π°Π΄Π°Π½ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠ΅ΡΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ½ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² 50px ΠΎΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π° Π½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ½ΠΎΠ²Π° ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°ΡΡΡΡ ΠΊ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ ΡΠΎΡΠΊΠ΅.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ :
Π ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ Π²Π΅ΡΡΠΈΡΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΏΠΎΠ»Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ°. Π Internet Explorer 10 ΠΈ 11 β ΡΠ°ΡΡΠΈΡΠ½Π°Ρ.
ΠΠΊΡΡΠ°Π»ΡΠ½ΠΎΡΡΡ ΠΏΡΠΎΠ²Π΅ΡΡΠΉΡΠ΅ Π½Π° ΡΠ°ΠΉΡΠ΅ Can I Use.
Π£Π·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅:
ΠΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ ΠΏΡΠΎ CSS ΠΈ ΡΡΠΎΠ½ΡΠ΅Π½Π΄:
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-x | ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΡ
CSS ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅
CSS ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-x ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ, Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΠ΅Ρ Π»Π΅Π²ΡΠΉ, Π»ΠΈΠ±ΠΎ ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°ΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
CSS ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
overflow-x:"visible | hidden | scroll | auto | initial | inherit";
JavaScript ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
object.style.overflowX = "hidden"
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
visible | ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
hidden | ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ (ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΡΠ°Π·ΠΌΠ΅ΡΡ Π±ΡΠ΄Π΅Ρ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠΌ). |
scroll | ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, Π½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ°Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ ΠΈΠ· Π·Π°Π΄Π°Π½Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ². |
auto | ΠΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, ΡΠΎ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ ΠΈΠ· Π·Π°Π΄Π°Π½Π½ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ². |
initial | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
inherit | Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. |
ΠΠ΅ΡΡΠΈΡ CSS
CSS3
ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ
ΠΠ΅Ρ.
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΠΎΠ΅
ΠΠ΅Ρ.
ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
<!DOCTYPE html> <html> <head> <title>ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² overflow-x ΠΈ overflow-y.</title> <style> div { display : inline-block; /* Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΠΌ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ <div> */ margin-right : 30px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² <div> */ width : 100px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ Π±Π»ΠΎΠΊΠΎΠ² */ height : 100px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ Π΄Π»Ρ Π±Π»ΠΎΠΊΠΎΠ² */ border : 1px solid red; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π΄Π»Ρ Π±Π»ΠΎΠΊΠΎΠ² ΡΠΏΠ»ΠΎΡΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 1px ΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°*/ } img { width : 125px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */ height : 125px; /* ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ */ } . test { overflow-x : visible; /* ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π»Π΅Π²ΠΎΠ³ΠΎ, Π»ΠΈΠ±ΠΎ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ overflow-y : visible; /* ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ, Π»ΠΈΠ±ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */ } .test2 { overflow-x : hidden; /* ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π»Π΅Π²ΠΎΠ³ΠΎ, Π»ΠΈΠ±ΠΎ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ (ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΡΠ°Π·ΠΌΠ΅ΡΡ Π±ΡΠ΄Π΅Ρ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠΌ) */ overflow-y : hidden; /* ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ, Π»ΠΈΠ±ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ (ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΡΠ°Π·ΠΌΠ΅ΡΡ Π±ΡΠ΄Π΅Ρ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠΌ) */ } .test3 { overflow-x : scroll; /* ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π»Π΅Π²ΠΎΠ³ΠΎ, Π»ΠΈΠ±ΠΎ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, Π½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ */ overflow-y : scroll; /* ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ, Π»ΠΈΠ±ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, Π½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ */ } .test4 { overflow-x : auto; /* Π΅ΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π»Π΅Π²ΠΎΠ³ΠΎ, Π»ΠΈΠ±ΠΎ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ, ΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡΡ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ */ overflow-y : auto; /* Π΅ΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ, Π»ΠΈΠ±ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ, ΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡΡ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ */ } </style> </head> <body> <div class = "test">visible <img src = nich. jpg alt = Π½ΠΈΡΠΎΡΠΈ> </div> <div class = "test2">hidden <img src = nich.jpg alt = Π½ΠΈΡΠΎΡΠΈ> </div> <div class = "test3">scroll <img src = nich.jpg alt = Π½ΠΈΡΠΎΡΠΈ> </div> <div class = "test4">auto <img src = nich.jpg alt = Π½ΠΈΡΠΎΡΠΈ> </div> </body> </html>ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² overflow-x ΠΈ overflow-y (ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ).
Β
CSS ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ
ΠΡΠ»ΠΈ Π²Ρ Π½Π°ΡΠ»ΠΈ ΠΎΡΠΈΠ±ΠΊΡ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, Π²ΡΠ΄Π΅Π»ΠΈΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΡΠ΅ΠΊΡΡΠ° ΠΈ Π½Π°ΠΆΠΌΠΈΡΠ΅ Ctrl+Enter.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
Π’Π²ΠΈΡΠ½ΡΡΡ
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ
overflow-x Β· ΠΠΎΠΊΡΠΌΠ΅Π½ΡΡ WebPlatform
Π‘Π²ΠΎΠ΄ΠΊΠ°
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΡΡΠ½ΡΠΌ ΡΠ»ΡΡΠ°Π΅ΠΌ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. ΠΠ½ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠ΅Ρ, ΠΊΠ°ΠΊ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΏΡΠ΅Π²ΡΡΠ°ΡΡΠΈΠΉ ΠΎΡΡ x ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡΠ΅ΠΉ ΡΠ°ΠΌΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ±Π·ΠΎΡΠ½Π°Ρ ΡΠ°Π±Π»ΠΈΡΠ°
- ΠΠ°ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
-
Π²ΠΈΠ΄ΠΈΠΌΡΠΉ
- ΠΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ
- Π½Π΅Π·Π°ΠΌΠ΅ΡΠ΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ° ΠΈ Π½Π΅Π·Π°ΠΌΠ΅ΡΠ΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² inline-block
- Π£Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ
- ΠΠ΅Ρ
- ΠΠ΅Π΄ΠΈΠ°
- Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ
- Π Π°ΡΡΠ΅ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
- , ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ Β«Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎΒ»
- ΠΠ½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ
- ΠΠ΅Ρ
- Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ CSS
-
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ X
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
-
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: Π°Π²ΡΠΎ
-
overflow-x: ΡΠΊΡΡΡΠΎ
-
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: Π½Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ
-
overflow-x: Π½Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
-
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°
-
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: Π²ΠΈΠ΄Π½ΠΎ
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- Π²ΠΈΠ΄ΠΈΠΌΡΠΉ
- ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠΎΠ½ΡΠ΅Π½Ρ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠ±ΡΠ΅Π·Π°ΡΡΡΡ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΎΠΊΠ½ΠΎ ΠΈΠ»ΠΈ ΡΡΠ΅ΠΉΠΌ.
- ΡΠ²ΠΈΡΠΎΠΊ
- Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠ±ΡΠ΅ΠΊΡΠ°.
- ΡΠΊΡΡΡΠΎ
- ΠΠΎΠ½ΡΠ΅Π½Ρ, ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±ΡΠ΅ΠΊΡΠ°, Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ.
- Π°Π²ΡΠΎ
- ΠΠΎΠ½ΡΠ΅Π½Ρ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, Π° ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ.
- Π±Π΅Π· ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
- ΠΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΏΠΎΠ»Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π²ΡΠ΅ ΠΏΠΎΠ»Π΅ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ Π±ΡΠ»ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ Β«display: noneΒ».
- Π±Π΅Π· ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ
- ΠΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΏΠΎΠ»Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π²ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ Π±ΡΠ»ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ Β«visibility: hiddenΒ».
ΠΡΠΈΠΌΠ΅ΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ overflow-x
width Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
.hidden {
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: ΡΠΊΡΡΡΠΎ;
}
.scroll {
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°;
}
.auto {
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: Π°Π²ΡΠΎ;
}
. visible {
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅;
}
ΠΏ {
Π±Π΅Π»ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ: nowrap;
}
ΡΠ΅Π»ΠΎ {
ΡΠΈΡΠΈΠ½Π°: 20em;
ΠΌΠ°ΡΠΆΠ°: 0 Π°Π²ΡΠΎ;
}
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS overflow-x ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ Π²ΡΡΠ΅Π·Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΠΎΠ²Π½Ρ Π±Π»ΠΎΠΊΠ°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ Π²ΡΡ
ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΈ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Π΅Π².
ΠΠ°Π½ΠΊΠ½ΠΎΡΡ
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-x Π·Π½Π°ΡΠ΅Π½ΠΈΡ visible ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π΄ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΎΠΊΠ½Π° ΠΈΠ»ΠΈ ΡΡΠ΅ΠΉΠΌΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡ.
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ
- CSS Π±Π°Π·ΠΎΠ²Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ
- ΠΡΠΎΠ΅ΠΊΡ ΡΠ΅Π΄Π°ΠΊΡΠΈΠΈ
- ΠΠΎΠ΄ΡΠ»Ρ CSS3: ΠΠΎΠ΄Π΅Π»Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ
- ΠΡΠ°Π΄ΠΊΠ° ΡΠ°Π±ΠΎΡΠΈΠΉ
- CSS Π±Π°Π·ΠΎΠ²Π°Ρ ΠΌΠΎΠ΄Π΅Π»Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ
- ΠΡΠ°Π΄ΠΊΠ° ΡΠ°Π±ΠΎΡΠΈΠΉ
Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅
Π‘ΠΎΠΏΡΡΡΡΠ²ΡΡΡΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ
ΠΡΡΠΈΠ±ΡΡΠΈΠΈ
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-Ρ | Codrops
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ, Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±ΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ, ΠΎΠ±ΡΠ΅Π·Π°Π½Π½ΡΠΌ (ΡΠΊΡΡΡΡΠΌ) ΠΈΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ Π»ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΡΡ
ΠΎΠ΄ΠΈΡ Π·Π° Π»Π΅Π²ΡΠΉ ΠΈ ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ Π·Π°Π΄Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ, ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π±Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²Π½ΠΎ Π·Π°Π΄Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π»Π΅Π²ΡΡ ΠΈ / ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x
ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π½Π° Π»Π΅Π²ΠΎΠΌ ΠΈ ΠΏΡΠ°Π²ΠΎΠΌ ΠΊΡΠ°Ρ, ΠΎΠ±ΡΠ΅Π·ΠΊΠΈ Π΅Π³ΠΎ (ΡΠΊΡΡΡΠΈΡ Π»ΡΠ±ΠΎΠ³ΠΎ Π»ΠΈΡΠ½Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π²ΡΡ
ΠΎΠ΄ΡΡΠ΅Π³ΠΎ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°) ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ
ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΌΠΎΠ³Π»ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π½Π° ΡΠ²ΠΈΡΠΊΠ΅.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x
ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ΅ΡΡΡΠ΅Ρ
Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ: visible
(Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ), hidden
(ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Π³ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°), scroll
(Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π½ΡΠΆΠ΅Π½ Π»ΠΈ ΠΎΠ½ ) ΠΈ auto
(ΡΡΠΎ ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π° ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΡΠ΅ΡΠ°ΡΡ, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π»ΠΈ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ).
overflow-x
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ (ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅) ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²ΡΡ
ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ. Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ overflow-x: scroll
ΠΈ overflow-x: auto
Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ², ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ scroll
Π΄ΠΎΠ±Π°Π²ΠΈΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π½ΡΠΆΠ½Π° ΠΎΠ½Π° ΠΈΠ»ΠΈ Π½Π΅Ρ, Π° auto
ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π΅Π΅ Π½Π° ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. ΡΡΠΎΠ±Ρ Π²ΡΠ±ΡΠ°ΡΡ, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈΡ
ΠΈΠ»ΠΈ Π½Π΅Ρ, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, Π΅ΡΡΡ Π»ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π½Π΅Ρ. Π’Π°ΠΊ ΠΊΠ°ΠΊ Π΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. Π CSS3 Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ Π½ΠΎΠ²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ: no-display
ΠΈ no-content
. ΠΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ( Π€Π΅Π²ΡΠ°Π»Ρ 2014 Π³. ).
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x
Π±ΡΠ»ΠΎ Π²Π²Π΅Π΄Π΅Π½ΠΎ Π² CSS3 ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π΄Π²ΡΡ
Π΄Π»ΠΈΠ½Π½ΡΡ
ΡΠ²ΠΎΠΉΡΡΠ² Π΄Π»Ρ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΊΠ°ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-x
, ΡΠ°ΠΊ ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow- Ρ
ΠΎΠ±ΡΠ΅ΠΊΡΠ° Π½Π΅Π΄Π²ΠΈΠΆΠΈΠΌΠΎΡΡΠΈ. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΡΠΌ. Π Π·Π°ΠΏΠΈΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow
.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x
ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. ΠΡΠ±ΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ, ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ
overflow
ΠΈΠ»ΠΈ overflow-y
. ΠΡΠ»ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ , Π° Π½Π΅ , ΡΠΊΠ°Π·Π°Π½ΠΎ ΡΠ²Π½ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
, ΡΠΎΠ³Π΄Π°:
- ΠΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
overflow-x
ΡΠ°Π²Π½ΠΎvisible
, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅overflow-y
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±ΡΠ΄Π΅Ρvisible
. - ΠΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
overflow-x
ΡΠ°Π²Π½ΠΎscroll
,auto
ΠΈΠ»ΠΈhidden
, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅overflow-y
Π±ΡΠ΄Π΅Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π½Π°auto
.
ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ overflow-x
ΠΈ overflow-y
ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ Ρ ΠΈΡ
ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ Ρ visible
Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ, ΠΏΠΎΡΡΠΎΠΌΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ, ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ Π² Π΄Π²ΡΡ
Π²ΡΡΠ΅ΡΠΏΠΎΠΌΡΠ½ΡΡΡΡ
ΠΏΡΠ½ΠΊΡΠ°Ρ
.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ΅ΡΡΡΠ΅Ρ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ overflow-x
ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Π²ΡΡΠΎΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π½ΠΎ Π·Π°Π΄Π°Π΅ΡΡΡ, ΠΈΠ½Π°ΡΠ΅ ΠΎΠ½ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠ°ΡΡΠΈΡΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π½Π΅ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ.
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
ΠΠ°ΠΌΠ΅ΡΠΊΠΈ
Π CSS3 Π½ΠΎΠ²ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-x
Ρ Π΄Π²ΡΠΌΡ Π½ΠΎΠ²ΡΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: visible | ΡΠΊΡΡΡΡΠΉ | ΡΠ²ΠΈΡΠΎΠΊ | Π°Π²ΡΠΎ | Π±Π΅Π· ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ | ΠΠ΅Π· ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ
.ΠΠ½Π°ΡΠ΅Π½ΠΈΡ no-display
ΠΈ no-content
Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π½ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ
- Π²ΠΈΠ΄ΠΈΠΌΡΠΉ
- ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΡΠΎ, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π½, ΡΠΎ Π΅ΡΡΡ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΈ / ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Π΅Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠ΄ΠΎΠΌ Ρ Π½ΠΈΠΌ.
- ΡΠΊΡΡΡΠΎ
- ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΈ / ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°ΡΠΌ ΠΈ ΡΡΠΎ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡΠ°Π²ΠΎΠΉ Π³ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
- Π°Π²ΡΠΎ
- ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ
auto
Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΡΠ·ΡΠ²Π°ΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ. - ΡΠ²ΠΈΡΠΎΠΊ
- ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΈ / ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ ΠΈ ΡΡΠΎ Π΅ΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ Π»ΠΈ ΠΊΠ°ΠΊΠΎΠ΅-Π»ΠΈΠ±ΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅.ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π² Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΠ΅Π΄Π΅.
- Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ
- ΠΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
overflow-x
ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. - Π±Π΅Π· ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΉ)
- ΠΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, Π²Π΅ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΄Π°Π»ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ
display
: none - Π±Π΅Π· ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ (ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΉ)
- ΠΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, Π²ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ Π±ΡΠ»Π° ΡΠΊΠ°Π·Π°Π½Π°
Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ
: ΡΠΊΡΡΡΡΠΉ
ΠΡΠΈΠΌΠ΅ΡΡ
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: Π°Π²ΡΠΎ; ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: ΡΠΊΡΡΡΠΎ; ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°; ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅; ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-Ρ : Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅;
ΠΠΈΠ²Π°Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ
ΠΠΈΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° ββΠΆΠΈΠ²Π°Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π² ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΈ Π²ΡΡΠ΅.ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-y
ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ overflow-x
.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow
ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΎ Π²ΡΠ΅Ρ
ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
: Chrome, Firefox, Safari, Opera, Internet Explorer, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π° Android ΠΈ iOS.
ΠΠ°Π½ΠΊΠ½ΠΎΡΡ
ΠΠ°ΠΊ ΡΠΏΠΎΠΌΠΈΠ½Π°Π»ΠΎΡΡ Π² MDN, IE8 ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠ» -ms-overflow-x
ΠΊΠ°ΠΊ ΡΠΈΠ½ΠΎΠ½ΠΈΠΌ overflow-x
.ΠΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΡΠ΅ΡΠΈΠΊΡ -ms-
.
CSS: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-x
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΏΠΎ CSS ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ overflow-x Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠΎΠΌ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ.
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS overflow-x ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ (Ρ. Π. ΠΠ»Π΅Π²ΠΎ ΠΈ Π²ΠΏΡΠ°Π²ΠΎ), Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-x:
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅;
ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΈΠ»ΠΈ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΡ
- Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΠΎΠ΅, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π²ΠΈΠ΄ΠΈΠΌΡΠΉ Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, Π½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ (ΡΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ)
div {overflow-x: visible; }ΡΠΊΡΡΡΠΎ Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ, ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ
div {overflow-x: hidden; }ΡΠ²ΠΈΡΠΎΠΊ Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
div {overflow-x: scroll; }Π°Π²ΡΠΎ ΠΡΠ°ΡΠ·Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π²Π°ΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΊ Π±ΡΠ°ΡΠ·Π΅ΡΡ (Π½ΠΎ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ)
div {overflow-x: auto; }ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΠ»Π΅ΠΌΠ΅Π½ΡΡΠ½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
div {overflow-x: inherit; }
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅
- Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΡΠ΅ΠΉΠΊΠ°ΠΌ Π±Π»ΠΎΠΊΠ°, Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΈ ΡΠ°Π±Π»ΠΈΡΡ.
- Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x Π½Π΅ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅. Π§ΡΠΎΠ±Ρ ΡΠΏΡΠ°Π²ΠΈΡΡΡΡ Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ, ΡΠΌ. Π‘Π²ΠΎΠΉΡΡΠ²Π° overflow ΠΈ overflow-y.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ CSS overflow-x ΠΈΠΌΠ΅Π΅Ρ Π±Π°Π·ΠΎΠ²ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ :
- Π₯ΡΠΎΠΌ
- Firefox (Gecko)
- Internet Explorer (IE)
- Opera 9.5+
- Safari (WebKit)
ΠΡΠΈΠΌΠ΅Ρ
ΠΡ ΠΎΠ±ΡΡΠ΄ΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-x Π½ΠΈΠΆΠ΅, ΠΈΡΡΠ»Π΅Π΄ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π² CSS.
Π²ΠΈΠ΄ΠΈΠΌΡΠΉ
ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ, Π³Π΄Π΅ ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ overflow-x ΡΠ°Π²Π½ΡΠΌ visible .
CSS Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
div {ΡΠΎΠ½: ΡΠ²Π΅ΡΠ»ΠΎ-ΠΆΠ΅Π»ΡΡΠΉ; Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ 3px; ΡΠΈΡΠΈΠ½Π°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅; }
HTML Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
ΠΡΠΎΡ Π°Π±Π·Π°Ρ Π½Π°ΠΏΠΈΡΠ°Π½ Π½Π° ΡΠ°ΠΉΡΠ΅ techonthenet.com.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ CSS overflow-x ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ overflow-x ΡΠ°Π²Π½ΡΠΌ visible , ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ (Ρ. Π΅. ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ), ΠΎΠ½ΠΎ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, Π° Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΊΠΎΡΠΎΠ±ΠΊΠ°.
Π‘ΠΊΡΡΡΡΠΉ
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ Π²ΠΎΠ·ΡΠΌΠ΅ΠΌ ΡΠΎΡ ΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π΄Π»Ρ overflow-x Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ hidden .
CSS Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
div {ΡΠΎΠ½: ΡΠ²Π΅ΡΠ»ΠΎ-ΠΆΠ΅Π»ΡΡΠΉ; Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ 3px; ΡΠΈΡΠΈΠ½Π°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: ΡΠΊΡΡΡΠΎ; }
HTML Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
ΠΡΠΎΡ Π°Π±Π·Π°Ρ Π½Π°ΠΏΠΈΡΠ°Π½ Π½Π° ΡΠ°ΠΉΡΠ΅ techonthenet.com.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ CSS overflow-x ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-x Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ hidden , ΠΏΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ (ΡΠΎ Π΅ΡΡΡ ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ), ΠΎΠ½ΠΎ ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ, ΠΈ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ.
Π‘Π²ΠΈΡΠΎΠΊ
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π΄Π°Π²Π°ΠΉΡΠ΅ Π²ΠΎΠ·ΡΠΌΠ΅ΠΌ Π½Π°Ρ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ overflow-x Π½Π° , ΠΏΡΠΎΠΊΡΡΡΠΈΡΠ΅ , ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ.
CSS Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
div {ΡΠΎΠ½: ΡΠ²Π΅ΡΠ»ΠΎ-ΠΆΠ΅Π»ΡΡΠΉ; Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΠΊΡΠ°ΡΠ½ΡΠΉ 3px; ΡΠΈΡΠΈΠ½Π°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°; }
HTML Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
ΠΡΠΎΡ Π°Π±Π·Π°Ρ Π½Π°ΠΏΠΈΡΠ°Π½ Π½Π° ΡΠ°ΠΉΡΠ΅ techonthenet. com.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ CSS overflow-x ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-x Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ scroll , ΠΏΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΏΠΎΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ (Ρ.Π΅. ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ), ΠΎΠ½ΠΎ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
CSS3 ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-x — Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅
Π’Π΅ΠΌΠ°: Π‘ΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ ΠΏΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ CSS3 ΠΡΠ΅Π΄. | Π‘Π»Π΅Π΄.
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x
CSS ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Π½Π° Π»Π΅Π²ΠΎΠΌ ΠΈ ΠΏΡΠ°Π²ΠΎΠΌ ΠΊΡΠ°ΡΡ
ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΈΡΡΠΎΡΠΈΡ Π²Π΅ΡΡΠΈΠΉ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: | Π²ΠΈΠ΄ΠΈΠΌΡΠΉ |
---|---|
ΠΡΠΈΠΌΠ΅Π½ΠΈΠΌΠΎ ΠΊ: | ΠΠ»ΠΎΠΊ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ, inline-block ΠΈ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ |
Π£Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ: | β |
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΡΠΉ: | β Π‘ΠΌ. Π°Π½ΠΈΠΌΠΈΡΡΠ΅ΠΌΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° . |
ΠΠ΅ΡΡΠΈΡ: | ΠΠΎΠ²ΠΎΠ΅ Π² CSS3 |
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π°Π΄Π°Π΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-x
Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ.
div {
ΡΠΈΡΠΈΠ½Π°: 400 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ°: 300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°;
}
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ ΠΎΠΏΠΈΡΠ°Π½Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
Π²ΠΈΠ΄ΠΈΠΌΡΠΉ | Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ; ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΏΠΎΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ. ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
ΡΠΊΡΡΡΠΎ | Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ, Π° ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±ΡΠ΄Π΅Ρ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠΌ. |
ΠΏΡΠΎΠΊΡΡΡΠΊΠ° | ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΡΡΠ΅ΠΊΠ°Π΅ΡΡΡ, ΠΊΠ°ΠΊ ΠΈ ΡΠΊΡΡΡΠΎΠ΅, Π½ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ Π΄ΠΎΡΡΡΠΏΠ° ΠΊ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠΌΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ. |
Π°Π²ΡΠΎ | ΠΡΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΏΠΎΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. |
Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ | Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. |
Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ | ΠΡΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½ΠΎ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° overflow-x . |
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x
ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΎ Π²ΡΠ΅Ρ
ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
.
ΠΠ°Π·ΠΎΠ²Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° —
|
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π»ΠΈΡΠ΅ΡΠ°ΡΡΡΠ°
Π‘ΠΌ. Π£ΡΠ΅Π±Π½ΠΈΠΊ ΠΏΠΎ ΡΠ΅ΠΌΠ΅: ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ CSS.
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°: overflow
, overflow-y
, clip
, word-wrap
.
CSS overflow-x Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ
CSS overflow-x Π‘Π²ΠΎΠΉΡΡΠ²ΠΎΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ°ΠΉΠ»Ρ cookie Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ ΠΈ Π°Π½Π°Π»ΠΈΠ·Π° ΠΏΠΎΡΠ΅ΡΠ°Π΅ΠΌΠΎΡΡΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΡΠΈΠ½ΠΈΠΌΠ°Ρ
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±ΡΡΡ ΡΠΊΡΡΡΡΠΌ, Π²ΠΈΠ΄ΠΈΠΌΡΠΌ ΠΈΠ»ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π»Π΅Π²ΡΠΉ ΠΈ ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ²ΠΎΠΉΡΡΠ² CSS3.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x ΠΈΠΌΠ΅Π΅Ρ ΡΠ΅ΡΡΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ: visible, scroll, auto ΠΈ hidden.
ΠΡΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-y ΡΠΊΡΡΡΠΎ, ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΈΠ»ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ, Π° overflow-x ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ.Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡΒΆ
overflow-x: visible | ΡΠΊΡΡΡΡΠΉ | ΡΠ²ΠΈΡΠΎΠΊ | Π°Π²ΡΠΎ | Π½Π°ΡΠ°Π»ΡΠ½Π°Ρ | Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ;
ΠΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-x: ΒΆ
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
<ΡΡΠΈΠ»Ρ>
div. ΠΏΡΠΈΠΌΠ΅Ρ {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 1c87c9;
ΡΠ²Π΅Ρ: #fff;
ΡΠΈΡΠΈΠ½Π°: 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°;
}
ΠΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° Overflow-x
Overflow-x: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°
Lorem Ipsum - ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΈΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π² ΠΏΠΎΠ»ΠΈΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈ Π½Π°Π±ΠΎΡΠ½ΠΎΠΉ ΠΈΠ½Π΄ΡΡΡΡΠΈΠΈ.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»Π Π΅Π·ΡΠ»ΡΡΠ°ΡΒΆ
ΠΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-x ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌΒ« visible Β»: ΒΆ
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
<ΡΡΠΈΠ»Ρ>
div.ΠΏΡΠΈΠΌΠ΅Ρ {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 1c87c9;
ΡΠ²Π΅Ρ: #cccccc;
ΡΠΈΡΠΈΠ½Π°: 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅;
}
ΠΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° Overflow-x
Overflow-x: visible
Lorem Ipsum - ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΈΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π² ΠΏΠΎΠ»ΠΈΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈ Π½Π°Π±ΠΎΡΠ½ΠΎΠΉ ΠΈΠ½Π΄ΡΡΡΡΠΈΠΈ.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»ΠΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-x ΡΠΎΒ« ΡΠΊΡΡΡΡΠΌ Β»Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ: ΒΆ
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
<ΡΡΠΈΠ»Ρ>
div. ΠΏΡΠΈΠΌΠ΅Ρ {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 1c87c9;
ΡΠ²Π΅Ρ: #fff;
ΡΠΈΡΠΈΠ½Π°: 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: ΡΠΊΡΡΡΠΎ;
}
ΠΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° Overflow-x
Overflow-x: ΡΠΊΡΡΡΠΎ
Lorem Ipsum - ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΈΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π² ΠΏΠΎΠ»ΠΈΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈ Π½Π°Π±ΠΎΡΠ½ΠΎΠΉ ΠΈΠ½Π΄ΡΡΡΡΠΈΠΈ.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»ΠΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-x ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌΒ« auto Β»: ΒΆ
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
<ΡΡΠΈΠ»Ρ>
div.ΠΏΡΠΈΠΌΠ΅Ρ {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 1c87c9;
ΡΠ²Π΅Ρ: #fff;
ΡΠΈΡΠΈΠ½Π°: 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: Π°Π²ΡΠΎ;
}
ΠΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° Overflow-x
Overflow-x: auto
Lorem Ipsum - ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΈΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π² ΠΏΠΎΠ»ΠΈΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈ Π½Π°Π±ΠΎΡΠ½ΠΎΠΉ ΠΈΠ½Π΄ΡΡΡΡΠΈΠΈ.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»ΠΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-x ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ: ΒΆ
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
<ΡΡΠΈΠ»Ρ>
div. scroll {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #ccc;
ΡΠΈΡΠΈΠ½Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°;
}
div.hidden {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #ccc;
ΡΠΈΡΠΈΠ½Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΡΠΊΡΡΡΠΎ;
}
div.auto {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #ccc;
ΡΠΈΡΠΈΠ½Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²: Π°Π²ΡΠΎ;
}
div.visible {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #ccc;
ΡΠΈΡΠΈΠ½Π°: 50 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²: Π²ΠΈΠ΄ΠΈΠΌΡΠΉ;
}
ΠΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° Overflow-x
overflow-x: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°
Lorem Ipsum - ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΈΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π² ΠΏΠΎΠ»ΠΈΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈ Π½Π°Π±ΠΎΡΠ½ΠΎΠΉ ΠΈΠ½Π΄ΡΡΡΡΠΈΠΈ.
overflow-x: ΡΠΊΡΡΡΠΎ
Lorem Ipsum - ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΈΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π² ΠΏΠΎΠ»ΠΈΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈ Π½Π°Π±ΠΎΡΠ½ΠΎΠΉ ΠΈΠ½Π΄ΡΡΡΡΠΈΠΈ.
overflow-x: auto
Lorem Ipsum - ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΈΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π² ΠΏΠΎΠ»ΠΈΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈ Π½Π°Π±ΠΎΡΠ½ΠΎΠΉ ΠΈΠ½Π΄ΡΡΡΡΠΈΠΈ.
overflow-x: visible
Lorem Ipsum - ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΈΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π² ΠΏΠΎΠ»ΠΈΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈ Π½Π°Π±ΠΎΡΠ½ΠΎΠΉ ΠΈΠ½Π΄ΡΡΡΡΠΈΠΈ.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»ValuesΒΆ
ΠΡΠ°ΠΊΡΠΈΠΊΡΠΉΡΠ΅ ΡΠ²ΠΎΠΈ Π·Π½Π°Π½ΠΈΡ
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π²Π°Ρ ΠΎΡΠ·ΡΠ²!
Π‘ΡΠΈΡΠ°Π΅ΡΠ΅ Π»ΠΈ Π²Ρ ΡΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ? ΠΠ° ΠΠ΅Ρ
Π‘ΡΠ°ΡΡΠΈ ΠΏΠΎ ΡΠ΅ΠΌΠ΅
CSS Overflow Module Level 3
1. ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
Π CSS ΡΡΠΎΠ²Π½Ρ 1 [CSS1] ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΡΠ΅ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Π²ΠΎΠΎΠ±ΡΠ΅ Π±ΡΠ»Π° ΠΎΡΠΈΠ±ΠΊΠ° Π°Π²ΡΠΎΡΠΈΠ½Π³Π°.ΠΡΠΎ ΠΏΡΠΈΠ²Π΅Π»ΠΎ ΠΊ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π½Π΅ Π³ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΡΠΎ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π²ΡΠ·ΠΎΠ²Π΅Ρ ΡΡΠΎΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
CSS ΡΡΠΎΠ²Π½Ρ 2 [CSS2] ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠ» ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π°Π²ΡΠΎΡΠ°ΠΌ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΡΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΎΡΠΈΠ±ΠΊΠ° Π°Π²ΡΠΎΡΠΈΠ½Π³Π°. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π°Π²ΡΠΎΡΠ°ΠΌ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ ΠΏΡΡΠ΅ΠΌ ΠΎΡΡΠ΅ΡΠ΅Π½ΠΈΡ, ΡΡΠΎ ΠΈΠΌΠ΅Π΅Ρ ΡΠΌΡΡΠ», ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π°Π²ΡΠΎΡΠ° Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ.
ΠΡΠ° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Π²Π²ΠΎΠ΄ΠΈΡ Π΄Π°Π²Π½ΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ Π΄Π΅-ΡΠ°ΠΊΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-x ΠΈ overflow-y, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ»ΠΈΠΏΠ°, ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
[Π§ΡΠΎ-ΡΠΎ ΠΌΠ°ΠΊΡ-ΡΡΡΠΎΡΠΊΠΈ.]
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠ°ΠΊΠΆΠ΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° text-overflow. ΡΠ°Π½Π΅Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ Π² [CSS-UI-3], Π±Π΅Π· Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Π΄Π»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ Π±Π»ΠΎΠΊΠ°.
1.1. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ
ΠΡΠ° ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΡΠΌ ΠΎΠ± ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ² CSS ΠΈΠ· [CSS2] Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈΠ· [CSS-VALUES-3]. Π’ΠΈΠΏΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π² ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π² CSS Values ββ& Units [CSS-VALUES-3].ΠΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΌΠΎΠ΄ΡΠ»ΡΠΌΠΈ CSS ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΡΠΈΡΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΠΈΡ ΡΠΈΠΏΠΎΠ² Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ.
Π Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ², ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠΌ Π² ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡΡ , Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π² ΡΡΠΎΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° Π΄Π»Ρ Π²ΡΠ΅Π³ΠΎ CSS Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠ»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΡΡΠ΅Π½ΠΈΡ ΠΎΠ½ΠΈ Π½Π΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ»ΠΈΡΡ ΡΠ²Π½ΠΎ.
2. Π’ΠΈΠΏΡ ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²Π°
CSS ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ΅ΡΠΌΠΈΠ½ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΡ ΠΎΠ΄ΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΊΡΠ°Π΅Π² ΡΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° (Ρ.e., Π΅Π³ΠΎ ΠΊΡΠ°ΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ , ΠΊΡΠ°ΠΉ , ΠΊΡΠ°ΠΉ ΠΈΠ»ΠΈ ΠΊΡΠ°ΠΉ ΠΏΠΎΠ»Ρ ). Π’Π΅ΡΠΌΠΈΠ½ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ»ΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ, Π²ΡΠ·ΡΠ²Π°ΡΡΠΈΠ΅ ΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, Π½Π΅ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ, Π·Π°Π½ΡΡΠ°Ρ ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΠΈΠ»ΠΈ, ΡΠ°ΡΠ΅, ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ, ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡΠΈΠΉ ΡΡΡ ΠΎΠ±Π»Π°ΡΡΡ. ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΡΠ°ΡΡΡΠΈΡΡΠ²Π°Π΅ΡΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΈ ΡΡΠΈΠ»Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°. ΠΈ Π²ΡΠ΅Ρ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ°Ρ ΡΠ΅ΠΏΠΎΡΠΊΠ° Π±Π»ΠΎΠΊΠΎΠ² Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΏΠΎΠ»Π΅.
Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΎ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΡΠΈΠΊΠ°. ΠΈΠ· Π³ΡΠ°Π½ΠΈΡ ΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ°ΠΌΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, ΠΏΠ»ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π΅Π³ΠΎ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ².Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡΡΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΡΠ°ΠΊ; ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° transform-style: preserve-3d [CSS3-TRANSFORMS] ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², Π»ΡΠ±ΡΠ΅ ΠΈΠ· ΠΈΡ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ² Ρ transform-style: preserve-3d, ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΡΠΎΠ²Π΅ΡΠ΅Π½Ρ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π²Π° ΡΠ°Π·Π½ΡΡ ΡΠΈΠΏΠ° ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² ΡΠ°Π·Π½ΡΡ ΡΠ΅Π»ΡΡ UA:
2.1. ΠΠ΅ΡΠ΅Π»ΠΈΠ² ΡΠ΅ΡΠ½ΠΈΠ»
ΠΠ΅ΡΠ΅Π»ΠΈΠ² ΡΠ΅ΡΠ½ΠΈΠ» ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΡΠ°ΡΡΡ ΡΡΠΎΠ³ΠΎ ΡΡΠΈΠΊΠ° ΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΠ·Π΄Π°Π΅Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠ°ΠΌΠΊΡ ΡΠ°ΠΌΠΊΠΈ.ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠ΅ΡΠ½ΠΈΠ» — ΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ ΠΈΠ»ΠΈ ΠΈΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠ°ΡΡΠΈΡΠΈΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΡΠ΅Π½ΠΈ Π±Π»ΠΎΠΊΠΎΠ², ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³ΡΠ°Π½ΠΈΡ, ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°, Π½Π°Π²ΠΈΡΠ°ΡΡΠΈΠ΅ Π³Π»ΠΈΡΡ (Ρ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ Π±ΠΎΠΊΠΎΠ²ΡΠΌΠΈ ΠΏΠΎΠ΄ΡΠΈΠΏΠ½ΠΈΠΊΠ°ΠΌΠΈ, ΠΈΠ»ΠΈ Ρ Π²Π΅ΡΡ Π½ΠΈΠΌΠΈ / Π½ΠΈΠΆΠ½ΠΈΠΌΠΈ Π²ΡΠ½ΠΎΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π²ΡΡ ΠΎΠ΄ΡΡΠΈΠΌΠΈ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΏΠΎΠ»Ρ EM), ΠΊΠΎΠ½ΡΡΡΡ, ΠΏΡ.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π² CSS (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°Π·ΠΌΡΡΠΈΠ΅ Π² ΡΠ΅Π½ΠΈ ΡΠ΅ΠΊΡΡΠ° [CSS-TEXT-3] ΠΈ ΡΠ΅Π½ΠΈ Π±Π»ΠΎΠΊΠ° [CSS-BACKGROUNDS-3], ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅ΠΎΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΈ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½Ρ) Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, ΠΊΠ°ΠΊΠΎΠΉ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΠΎΠ±ΡΠ΅ΠΌ ΠΎΠ½ΠΈ ΠΏΠΎΠΊΡΡΠ²Π°ΡΡ, ΡΡΠ΅ΠΏΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ΅ΡΠ½ΠΈΠ» Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ.
ΠΠ±Π»Π°ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ΅ΡΠ½ΠΈΠ» — Π½Π΅ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ Π·Π°Π½ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ΅ΡΠ½ΠΈΠ»Π°ΠΌΠΈ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΠΈ Π΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΈ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ΅ΡΠ½ΠΈΠ» — ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ, ΠΎΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²ΡΡΠΎΠ²Π½Π΅Π½Ρ Ρ ΠΎΡΡΠΌΠΈ Π±Π»ΠΎΠΊΠ° ΠΈ ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²Π° ΡΠ΅ΡΠ½ΠΈΠ». ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²Π° ΡΠ΅ΡΠ½ΠΈΠ» ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠΌ Π² ΡΠΈΡΡΠ΅ΠΌΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π±Π»ΠΎΠΊΠ°, Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠΌ Π² Π΄ΡΡΠ³ΠΈΡ ΡΠΈΡΡΠ΅ΠΌΠ°Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΈΠ·-Π·Π° ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ. [CSS3-TRANSFORMS]
2.2. ΠΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
ΠΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΠΊΠ½Π° — ΡΡΠΎ Π½Π°Π±ΠΎΡ Π²Π΅ΡΠ΅ΠΉ, Π²ΡΡ ΠΎΠ΄ΡΡΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΊΡΠ°Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ»Ρ Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ — ΡΡΠΎ Π½Π΅ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ Π·Π°Π½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ, Π° ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ, ΠΎΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²ΡΡΠΎΠ²Π½Π΅Π½Ρ Ρ ΠΎΡΡΠΌΠΈ Π±Π»ΠΎΠΊΠ° ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
ΠΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅:
- ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±Π»ΠΎΠΊΠ° ΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
ΠΡΡΡ ΡΠ°Π·Π½ΠΎΠ³Π»Π°ΡΠΈΡ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. 2.1 ΡΠ²Π½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠ», ΡΡΠΎ Π²Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΡ * ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ *;
ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΡΡ ΠΏΠΎΠ»Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ,
ΠΈ Π²Ρ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΠ΅ ΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Ρ ΠΏΠΎΠ»Π΅ΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π½Π°ΠΉΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΡ ΠΎΠ±Π»Π°ΡΡΡ.Π ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠΌΠ΅ΡΠ΅Π½ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ start-side,
Π½ΠΎ Π΅ΡΠ»ΠΈ ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΠΈΡΡΡ,
ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΈΠ΄ΡΠΈ ΠΏΡΡΠΌΠΎ ΠΊ ΠΊΡΠ°Ρ Π½Π° ΡΠΎΡΡΠ΅Π²ΡΡ
ΡΡΠΎΡΠΎΠ½Π°Ρ
.
ΠΡΠΎ ΡΠΎ, ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ Firefox ΠΈ IE.
ΠΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π°Π²ΡΠΎΡΡ (ΠΈ Π°Π²ΡΠΎΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ) Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΈΠΌΠ΅ΠΉΡΠ΅ Π² Π²ΠΈΠ΄Ρ, ΡΡΠΎ ΠΏΠΎΠ»Π΅ Π΄Π»Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ — ΡΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΠ΅ Π΄ΠΎ ΠΊΠΎΠ½ΡΠ° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, Π΅ΡΡΡ ΠΏΡΠ°Π²ΡΠΉ / Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΎΡΡΡΡΠΏ. Chrome / WebKit Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ, ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, Π΄Π»Ρ ΠΎΡΠΈ Π±Π»ΠΎΠΊΠΎΠ². ΠΠ½ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π΅ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡ Π΄Π»Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΉ ΠΎΡΠΈ; Π΅ΡΡΡ ΡΡΠΎ-ΡΠΎ ΡΡΡΠ°Π½Π½ΠΎΠ΅ Π² ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΡΡΡΠΎΡΠ½ΡΠ΅ ΠΏΠΎΠ»Ρ.
ΠΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΎΡΠ΅ΠΉ Π±Π»ΠΎΠΊΠΎΠ², Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π²Π΅Π±-ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎ, ΡΡΠΎΠ±Ρ ΡΠΎΠ±Π»ΡΠ΄Π°ΡΡ. ΠΠ΅ΡΡΠ½ΠΎ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ ΠΎΡΡΡΡΠΏ ΠΏΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΉ ΠΎΡΠΈ. Π’ΡΠ΅Π±ΡΡΡΡΡ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠΈΠ΅ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΡ.
- Π²ΡΠ΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅ Π±ΠΎΠΊΡΡ, Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ΡΡ Π² Π±ΠΎΠΊΡΠ΅
- ΡΠ°ΠΌΠΊΠΈ
Π²ΡΠ΅Ρ
ΡΡΠΈΠΊΠΎΠ², Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ
ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ
ΠΈ ΡΡΠΈ Π³ΡΠ°Π½ΠΈΡΠ½ΡΠ΅ ΡΠ°ΠΌΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ½Π°ΡΡΠΆΠΈ
Π΅Π³ΠΎ ΠΊΡΠ°Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ block-start ΠΈΠ»ΠΈ inline-start,
ΡΡΠ΅Ρ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΉ ΠΏΡΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ Π½Π°
ΠΏΠ»ΠΎΡΠΊΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ 3D-ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π°. [CSS3-TRANSFORMS]
ΠΡΠΎ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΎΡΠ½ΠΎ?
- ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π²ΡΠ΅Ρ
Π²ΡΡΠ΅ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΡ
ΠΏΠΎΠ»Π΅ΠΉ
(Ρ ΡΡΠ΅ΡΠΎΠΌ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ, ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π²ΡΡΠ΅),
ΠΏΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠΈ, ΡΡΠΎ Ρ Π½ΠΈΡ
ΡΠ°ΠΌΠΈΡ
Π΅ΡΡΡ overflow: visible (Ρ.Π΅. ΠΎΠ½ΠΈ ΡΠ°ΠΌΠΈ Π½Π΅ Π·Π°Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅)
ΠΈ ΡΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΅ΡΠ΅ Π½Π΅ ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ
(Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° clip ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° contain).
Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΡΡΡΡ: clip ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΡΠ΅ΠΊΠ°Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ ΡΠΈΡΡΠΎΠΉ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠ΅ΠΉ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π»ΠΎ Π±Ρ, ΡΡΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, Ρ ΠΎΡΡ ΠΈ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅, Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΌ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π‘Π²ΠΎΠΉΡΡΠ²Π° mask- * [CSS-MASKING-1] Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΠ΅Π½ΠΈΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ ΡΡΠ΅ΡΠ° ΠΈΠ»ΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ»ΠΈΠΏΠ° ΠΈ ΠΏΡΡΠΈ ΠΊΠ»ΠΈΠΏΠ°.
- ΠΡΡΡΡΠΏΡ Π½Π° ΠΊΡΠ°ΡΡ
ΠΊΠΎΠ½ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ Π½Π° ΠΊΡΠ°ΡΡ
, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ ΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ,
Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ Π΄ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΡΠ» Π±Ρ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ place-content: end. ΠΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄Π»Ρ Π±Π»ΠΎΡΠ½ΡΡ
ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Π½Π° Π»ΡΠ±ΠΎΠΉ ΠΎΡΠΈ, ΡΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ (align-content / justify-content)
ΡΡΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ.
ΠΠΎΠΊΠ° Π½Π΅ ΡΡΠ½ΠΎ, ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎ Π»ΠΈ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π±ΠΎΠΊΠΎΠ²ΡΡ ΠΎΡΡΡΡΠΏΠΎΠ² Π² ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΉ ΡΠ»ΠΎΠΉ Π±Π»ΠΎΡΠ½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Ρ Web, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΠΎΡ ΠΏΡΠ½ΠΊΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΡΠ°Π΄ΠΈΠΈ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ. ΠΠΎΡ ΠΎΠΆΠ΅, ΡΡΠΎ Chrome ΠΈ Safari Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ Π½Π° ΠΎΡΠΈ Π±Π»ΠΎΠΊΠ°; ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΉ ΠΎΡΠΈ Π½Π΅ΡΡΠ½ΠΎ.
- ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ»Π΅ΠΉ ΠΏΠΎΠ»Π΅ΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ΅ΡΠΊΠΈ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π±ΠΎΠΊΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ. UA ΠΌΠΎΠΆΠ΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΠ»Π΅ΠΉ Π΄ΡΡΠ³ΠΈΡ Π±ΠΎΠΊΡΠΎΠ² Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π±ΠΎΠΊΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ; ΡΠ΅ΠΌ Π½Π΅ ΠΌΠ΅Π½ΠΈΠ΅, ΡΡΠ»ΠΎΠ²ΠΈΡ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΌΠ°ΡΠΆΠΈΠ½Π°Π»ΡΠ½ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ Π½Π° ΡΡΠΎΠΌ ΡΡΠΎΠ²Π½Π΅.ΠΡΠΎ ΡΡΠ΅Π±ΡΠ΅Ρ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π³ΠΎ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΡ; ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΡΠ»ΠΎΠΆΠ΅Π½ΠΎ Π² ΡΡΠΎΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π²ΡΠ΅Π³Π΄Π° ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠΌ. Π² ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ Π±Π»ΠΎΠΊΠ°, Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠΌ Π² Π΄ΡΡΠ³ΠΈΡ ΡΠΈΡΡΠ΅ΠΌΠ°Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΈΠ·-Π·Π° ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ [CSS3-TRANSFORMS]. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ, ΠΊΠΎΠ³Π΄Π° Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ.
3. ΠΡΠΎΠΊΡΡΡΠΊΠ° ΠΈ ΠΎΡΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ-x, ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ-y ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±Π»ΠΎΠΊΠ° (Π²ΠΊΠ»ΡΡΠ°Ρ Π»ΡΠ±ΡΠ΅ ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²Ρ ΡΠ΅ΡΠ½ΠΈΠ») ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ ΠΊ ΠΊΡΠ°Ρ ΠΎΠ±ΠΈΠ²ΠΊΠΈ, ΠΈ Π΅ΡΠ»ΠΈ ΡΡΠΎ ΡΠ°ΠΊ, Π―Π²Π»ΡΠ΅ΡΡΡ Π»ΠΈ ΡΡΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ , ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΠΎΠ±ΡΠ΅Π·Π°Π½Π½ΡΠ΅ ΡΠ°ΡΡΠΈ Π΅Π³ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π² ΠΏΠΎΠ»Π΅ Π·ΡΠ΅Π½ΠΈΡ.ΠΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (ΡΠ΅ΡΠ΅Π· ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ) ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ Π΅Π³ΠΎ ΠΏΡΠΎΠΊΠ»Π°Π΄ΠΊΠΎΠΉ, ΠΈ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ scrollport . ΠΠ»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° Π±Π»ΠΈΠΆΠ°ΠΉΡΠΈΠΉ ΡΠΊΡΠΎΠ»Π»ΠΏΠΎΡΡ Π±Π»ΠΎΠΊΠ° — ΡΡΠΎ ΡΠΊΡΠΎΠ»Π»ΠΏΠΎΡΡ Π΅Π³ΠΎ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΠΏΡΠ΅Π΄ΠΊΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π°.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-x ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²Π° Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ (Ρ.Π΅. ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Ρ Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ), Π° ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-y ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΡ ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²Π° Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ (Ρ.Π΅., ΠΏΠ΅ΡΠ΅Π»ΠΈΠ² Ρ Π²Π΅ΡΡ Π½Π΅ΠΉ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΡΠΎΡΠΎΠ½ ΡΡΠΈΠΊΠ°).
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ overflow-x ΠΈ overflow-y Π² ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. ΠΡΠ»ΠΈ Π²ΡΠΎΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠΏΡΡΠ΅Π½ΠΎ, ΠΎΠ½ΠΎ ΠΊΠΎΠΏΠΈΡΡΠ΅ΡΡΡ ΠΈΠ· ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
- Π²ΠΈΠ΄ΠΈΠΌΡΠΉ
- ΠΠ΅Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΡΠΎ Π΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±Π»ΠΎΠΊΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Π±Π»ΠΎΠΊΠ°, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΎ ΡΠ°ΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ. ΠΠΎΠ»Π΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
- ΡΠΊΡΡΡΠΎ
- ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΠΏΠΎ ΠΏΠΎΠ»Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΈ ΡΡΠΎ UA Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΎΡΡΠ΅ΡΠ΅Π½ΠΈΡ, ΠΈ Π½Π΅ ΡΠ°Π·ΡΠ΅ΡΠ°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΏΡΠΈ ΠΏΡΡΠΌΠΎΠΌ Π²ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΡΡΠ²Π΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π½Π° ΡΠ΅Π½ΡΠΎΡΠ½ΠΎΠΌ ΡΠΊΡΠ°Π½Π΅ ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ»Π΅ΡΠΈΠΊΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΌΡΡΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π² [CSSOM-VIEW], ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ ΠΊΠΎΡΠΎΠ±ΠΊΠ° ΠΎΡΡΠ°Π΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
- Π·Π°ΠΆΠΈΠΌ
- ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ
ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±ΠΎΠΊΡΠ° ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΠΏΠΎ ΠΊΡΠ°Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΠΈ UA Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ
Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΎΡΡΠ΅ΡΠ΅Π½ΠΈΡ.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ overflow: hidden, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π΄ΠΎΠΏΡΡΠΊΠ°Π΅Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, overflow: clip ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π·Π°ΠΏΡΠ΅ΡΠ°Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΡ,
ΡΠ΅ΡΠ΅Π· Π»ΡΠ±ΠΎΠΉ ΠΌΠ΅Ρ
Π°Π½ΠΈΠ·ΠΌ,
ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΎΠ»Π΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΠΊΡΡΡΠΎΠ³ΠΎ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π°Π²ΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ Ρ ΠΎΡΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ»ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ display: flow-root Π²ΠΌΠ΅ΡΡΠ΅ Ρ overflow: clip.
- ΡΠ²ΠΈΡΠΎΠΊ
- ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΎΠ±ΡΠ΅Π·Π°Π΅ΡΡΡ ΠΏΠΎ ΠΏΠΎΠ»Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ Π² ΠΏΠΎΠ»Π΅ Π·ΡΠ΅Π½ΠΈΡ (ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΠΎΠ»Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ). ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π°Π³Π΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΠ°Π½Π΅Π»Ρ ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ), ΡΡΠΎΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ Π»ΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅.ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ. ΠΈ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ Π² Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ½ΠΎΠΉ ΡΡΠ΅Π΄Π΅. ΠΠΎΠ³Π΄Π° ΡΠ΅Π»Π΅Π²ΠΎΠΉ Π½ΠΎΡΠΈΡΠ΅Π»Ρ — ΠΏΠ΅ΡΠ°ΡΡ, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π°ΠΏΠ΅ΡΠ°ΡΠ°Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅; Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ, Π³Π΄Π΅ ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π°ΠΏΠ΅ΡΠ°ΡΠ°Π½ΠΎ.
- Π°Π²ΡΠΎ
- ΠΠ°ΠΊ ΠΏΡΠΎΠΊΡΡΡΠΊΠ°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅; Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²ΡΠΎΠ΄Π΅ Π±Ρ ΡΠΊΡΡΡΠΎ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π°Π³Π΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΠ°Π½Π΅Π»Ρ ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ), ΡΡΠΎΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π΅ΡΠ»ΠΈ Π΅ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅.
ΠΡΠ»ΠΈ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π² Π±Π»ΠΎΠΊΠ΅ Π½Π΅ Π²ΠΈΠ΄Π½ΠΎ, Π½ΠΈ ΠΎΡΡΠ΅ΡΠ΅Π½ΠΈΡ, Π½ΠΈ ΠΈΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ, ΠΎΠ½ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
3.1. ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΠΏΠ΅ΡΠ°ΡΠΈ ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°Ρ
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΡΠΎΠΊΡΡΡΠΊΠ° Π½Π° ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ Π½ΠΎΡΠΈΡΠ΅Π»ΡΡ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Π° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠ΅ΡΠ°ΡΡ) Π°Π²ΡΠΎΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ»Π΅Π΄ΠΈΡΡ Π·Π° ΡΠ΅ΠΌ, ΡΡΠΎΠ±Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π±ΡΠ» Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π½Π° ΡΠ°ΠΊΠΈΡ Π½ΠΎΡΠΈΡΠ΅Π»ΡΡ , Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ @media print, (update: none) {β¦}, ΡΡΠΎΠ±Ρ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΌΠ°ΠΊΠ΅Ρ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ Π²Π΅ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π²ΠΈΠ΄Π΅Π½.
Π ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°Ρ Π² Π½Π΅ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΡΡΠ΅Π΄Π°Ρ ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ auto ΠΈΠ»ΠΈ scroll (Π½ΠΎ Π½Π΅ ΡΠΊΡΡΡΡΠΌ) UA ΠΌΠΎΠ³ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΈΡ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Ρ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈΠ»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΠ΅ Π²ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΠ½ΡΠ΅ Π½ΠΎΡΠΈΡΠ΅Π»ΠΈ Π½Π΅ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Ρ. Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΊΠ½ΠΈΠ³, Π½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Ρ.
2″> 3.2. ΠΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ ΡΠ»ΡΡΠ°Π΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π° ΠΊΡΠ°Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π²ΡΡΠ°Π²Π»Π΅Π½ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΡΠ°Π΅ΠΌ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΠΊΡΠ°ΠΉ Π½Π°Π±ΠΈΠ²ΠΊΠΈ.ΠΡΠ±ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, Π·Π°Π½ΠΈΠΌΠ°Π΅ΠΌΠΎΠ΅ ΠΏΠΎΠ»ΠΎΡΠ°ΠΌΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π²ΡΠ½ΡΡ ΠΈΠ· (Π²ΡΡΡΠ΅Π½Ρ ΠΈΠ· ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ²) ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π±Π»ΠΎΠΊ, ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Ρ ΠΏΠΎΠ»ΠΎΡΠ°ΠΌΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΈΠΌΠΏΠΎΡΡΠ° ΠΈΠ· [CSS3-BOX].
3.3. ΠΠ°ΡΠ°Π»ΠΎ, Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΠ°ΡΠ°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ , ΡΠΎ Π΅ΡΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠ°Ρ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ Π³ΡΠ°Π½ΠΈΡΡ, ΠΏΠ΅ΡΠ΅Π΄ Π»ΡΠ±ΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ Π΅Π³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ, Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ΅ΠΆΠΈΠΌΠ° ΠΏΠΈΡΡΠΌΠ° ΠΊΠΎΡΠΎΠ±ΠΊΠΈ, ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΠΎ ΠΊΡΠ°ΠΉ Π±Π»ΠΎΠΊΠ°-Π½Π°ΡΠ°Π»Π° / ΠΈΠ½Π»Π°ΠΉΠ½-Π½Π°ΡΠ°Π»Π° ΠΊΡΠ°Ρ Π½Π°Π±ΠΈΠ²ΠΊΠΈ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ.ΠΠ΄Π½Π°ΠΊΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° align-content ΠΈ justify-content [CSS-ALIGN-3] ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎ, ΡΠΌ. CSS Box Alignment 3 Β§5.3 ΠΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΠ·-Π·Π° ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠΉ Π²Π΅Π±-ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ (Π²ΡΠ·Π²Π°Π½ΠΎ ΡΠ΅ΠΌ, ΡΡΠΎ Π°Π²ΡΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ, ΡΡΠΎΠ±Ρ ΡΠ°ΠΉΠ½ΠΎ ΡΠΊΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΎΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠ°ΡΠ΅Π»Π΅ΠΉ, Π½ΠΎ Π½Π΅ ΠΎΡ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΡ ΡΠΈΡΡΠ΅ΠΌ ΠΈ / ΠΈΠ»ΠΈ ΡΠ΅ΡΠ΅Π²ΠΎΠ³ΠΎ Π²ΡΠ²ΠΎΠ΄Π°), UA Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π½Π° ΡΡΠΎΡΠΎΠ½Π°Ρ Π±Π»ΠΎΠΊΠ°, Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ ΡΡ Ρ Π±Π»ΠΎΠΊΠ°, ΠΈ ΠΈΠ½Π»Π°ΠΉΠ½-ΡΡΠ°ΡΡΠ°. (ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ Π²Π΅Π΄Ρ ΡΠ΅Π±Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ Π½Π° ΡΡΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π΅ Π½Π΅ Π±ΡΠ»ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ).
ΠΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ΅ΠΆΠΈΠΌ Π·Π°ΠΏΠΈΡΠΈ Π΄Π»Ρ ΡΡΠΈΡ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠΉ.
3.4. Π Π°ΡΡΠΈΡΡΡΡΠ΅Π΅ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: Π³ΡΠ°Π½ΠΈΡΡ ΠΊΠ»ΠΈΠΏΠ°: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow-clip-margin
Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ, overflow: clip ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π° Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π΅Π»Ρ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ overflow-clip-margin ΡΠΎΡΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ , Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΎ ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΎΠ±ΡΠ΅Π·ΠΊΠΎΠΉ.
ΠΡΠ°ΠΉ ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²Π½ΠΎΠ³ΠΎ Π·Π°ΠΆΠΈΠΌΠ° ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ ΠΊΡΠ°Π΅ΠΌ Π½Π°Π±ΠΈΠ²ΠΊΠΈ, Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ Π½Π°ΡΡΠΆΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ overflow-clip-margin, ΠΊΠ°ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ Π½ΠΈΠΆΠ΅.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
- <Π΄Π»ΠΈΠ½Π° [0, β]>
ΠΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ overflow: clip (ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π΄Π»Ρ ΡΠΎΠ±Π»ΡΠ΄Π΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°), ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ.
Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΊΠ°Π·Π°Π½Π½Π°Ρ Π΄Π»ΠΈΠ½Π° Π΄ΠΈΠΊΡΡΠ΅Ρ Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΡΠ°ΠΉ ΠΊΠ»ΠΈΠΏΠ° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ°ΡΡΠΈΡΡΠ΅ΡΡΡ ΠΎΡ ΠΊΡΠ°Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΡΠ΅Π½Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΡΠ°ΡΡΠ΅Ρ ΠΈΠ·-Π·Π° ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ (Π²ΠΊΠ»ΡΡΠ°Ρ ΡΡΡΠ΅ΠΊΡ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΡ ΡΠ³Π»ΠΎΠ²).ΠΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅Π΄ΠΎΠΏΡΡΡΠΈΠΌΡ.
3.5. Π Π°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°
UA Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ overflow- *
ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½ΠΈΠ΅,
ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ [HTML] html
(Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ XML Π΄Π»Ρ HTML)
ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π²ΠΈΠ΄Π½ΠΎ (ΠΏΠΎ ΠΎΠ±Π΅ΠΈΠΌ ΠΎΡΡΠΌ),
ΠΈ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ body
ΠΊΠ°ΠΊ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ,
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ Π°Π³Π΅Π½ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ overflow- *
ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠ°ΠΊΠΎΠ³ΠΎ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.Π’ΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΈΠ· ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ visible.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π½Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΡΡΡΡ Π½Π° ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π΅ΡΠ»ΠΈ Π½Π΅Ρ ΠΏΠΎΠ»Π΅ΠΉ. Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π½Π΅Ρ).
ΠΡΠ»ΠΈ Π²ΠΈΠ΄ΠΈΠΌΡΠΉ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΊΠ°ΠΊ Π°Π²ΡΠΎ. ΠΡΠ»ΠΈ ΠΊΠ»ΠΈΠΏ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΡΠΊΡΡΡΠΎΠ΅.
3.6. ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΡΠΎΠΊΠ°: ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow-block ΠΈ overflow-inline
Π‘Π»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ ΡΠΎΠ³Π»Π°ΡΠ½ΠΎ ΡΠΎΠΉ ΠΆΠ΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΊΠ°ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ, ΠΎΡΠ½ΠΎΡΡΡΠΈΠ΅ΡΡ ΠΊ ΠΏΠΎΡΠΎΠΊΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Β«ΠΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS 1 Β§4Β» Π‘Π²ΠΎΠΉΡΡΠ²Π° Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ, ΠΎΡΠ½ΠΎΡΡΡΠΈΠ΅ΡΡ ΠΊ ΠΏΠΎΡΠΎΠΊΡ.
ΠΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ overflow-x ΠΈ overflow-y. ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠ΅ΠΆΠΈΠΌΠ° ΠΏΠΈΡΡΠΌΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
4. ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ»Π»ΠΈΠΏΡΡ
4.1. ΠΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°
ΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΊΡΠ°ΠΉ ΡΠ°ΠΌΠΊΠΈ Π΅Π³ΠΎ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ Π² Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΠΈΠ½Π»Π°ΠΉΠ½-ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° («Π±Π»ΠΎΠΊΠ°») Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π»ΠΈΠ², ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΎΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ.
Π’Π΅ΠΊΡΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΡΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ Π½Π΅ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΡΡ
(Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ·-Π·Π° ΠΏΡΠΎΠ±Π΅Π»Π° : nowrap
ΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΎ ΡΠ»ΠΎΠ²ΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄Π»ΠΈΠ½Π½ΠΎΠ΅, ΡΡΠΎΠ±Ρ ΡΠΌΠ΅ΡΡΠΈΡΡΡΡ).
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
- Π·Π°ΠΆΠΈΠΌ
- ΠΠ±ΡΠ΅Π·Π°ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ Π΅Π³ΠΎ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. ΠΠ΅ΡΡΠΎΠ½Π°ΠΆΠΈ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΠΈΡΠ½ΠΎ.
- ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅
- ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Π° ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ (U + 2026) Π΄Π»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅Π·Π°Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ ΡΠ·ΡΠΊ, ΡΡΠ΅Π½Π°ΡΠΈΠΉ ΠΈΠ»ΠΈ ΡΠ΅ΠΆΠΈΠΌ ΠΏΠΈΡΡΠΌΠ°. Π·Π½Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ, ΠΈΠ»ΠΈ ΡΡΠΈ ΡΠΎΡΠΊΠΈ «…», Π΅ΡΠ»ΠΈ ΡΠΈΠΌΠ²ΠΎΠ» ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ Π½Π΅Π΄ΠΎΡΡΡΠΏΠ΅Π½.
Π ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ΅ΡΠΌΠΈΠ½ Β«ΠΏΠ΅ΡΡΠΎΠ½Π°ΠΆΒ». Π΄Π»Ρ Π»ΡΡΡΠ΅ΠΉ ΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΠΈ ΠΈ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Β«ΠΊΠ»Π°ΡΡΠ΅Ρ Π³ΡΠ°ΡΠ΅ΠΌΒ» [UAX29] Π΄Π»Ρ ΡΠ΅Π»Π΅ΠΉ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ.
ΠΠ»Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΊΡΡΠ²Π°ΡΡ ΡΠΈΠΌΠ²ΠΎΠ»Ρ ΠΈ Π°ΡΠΎΠΌΠ°ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ Π½Π° ΠΊΠΎΠ½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ, ΠΈ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΡΡΠ΄ΠΎΠΌ Π΄ΠΎ ΠΊΠΎΠ½ΡΠ° ΠΎΡΡΠ°Π²ΡΠ΅Π³ΠΎΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.ΠΠ΅ΡΠ²ΡΠΉ ΡΠΈΠΌΠ²ΠΎΠ» ΠΈΠ»ΠΈ Π°ΡΠΎΠΌΠ°ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΡΠΎΠΊΠΎΠ²ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ Π² ΡΡΡΠΎΠΊΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΎΠ±ΡΠ΅Π·Π°Π½Ρ, Π° Π½Π΅ ΠΎΠΊΡΡΠ³Π»Π΅Π½Ρ.
ΠΡΠΈΠΌΠ΅ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ Π΄Π²ΡΠ½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°
ΠΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ ΡΠΊΡΡΠ²Π°ΡΡΡΡ ΡΡΠΎΠ±Ρ ΠΎΡΠ²ΠΎΠ±ΠΎΠ΄ΠΈΡΡ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ Π² ΡΠ»ΡΡΠ°Π΅ Π΄Π²ΡΠ½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°: ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π½Π° ΠΊΠΎΠ½ΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ.ΠΡΠΈΠΌΠ΅Ρ CSS:
div {font-family: monospace; white-space: pre; overflow: hidden; width: 9ch; text-overflow: ellipsis;}
ΠΡΠΈΠΌΠ΅ΡΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² HTML, Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈ Π²Π°ΡΠ΅Π³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°:
HTML | Π‘ΠΏΡΠ°Π²ΠΎΡΠ½Π°Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ | ΠΠ°Ρ Π±ΡΠ°ΡΠ·Π΅Ρ |
---|---|---|
| 123456 Χβ¦ | Χ©ΧΧΧ 123456 |
| β¦ 456 ΧΧ | Χ©ΧΧΧ 123456 |
ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅
- ΠΠ»Π»ΠΈΠΏΡ Π²Π»ΠΈΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ ΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Π»ΠΈΡΡΡ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ Π½ΠΈ ΠΎΡΠΏΡΠ°Π²ΠΊΠ° ΡΠΎΠ±ΡΡΠΈΠΉ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ: UA Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ Π»ΡΠ±ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ Π½Π° ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ Π² ΠΏΡΠΎΠΏΡΡΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° Π½Π΅ Π±ΡΠ»ΠΎ.
- ΠΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΎ ΠΈ Π²ΡΡΠΎΠ²Π½Π΅Π½ΠΎ ΠΏΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π±Π»ΠΎΠΊ.
- ΠΠ»Π»ΠΈΠΏΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΠΏΠΎΡΠ»Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ Π΄ΡΡΠ³ΠΈΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ.
- ΠΡΠ»ΠΈ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠ°, Π·Π°ΡΠ΅ΠΌ ΠΎΠ±ΡΠ΅ΠΆΡΡΠ΅ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ (Π½Π° ΡΠΎΠΉ ΠΆΠ΅ ΡΡΠΎΡΠΎΠ½Π΅, ΡΡΠΎ Π½Π΅ΠΉΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ Π² ΡΡΡΠΎΠΊΠ΅ Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π±ΡΠ» Π±Ρ ΠΎΠ±ΡΠ΅Π·Π°Π½ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ text-overflow: clip).
Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ΠΌ
- ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ (Π΅.Π³ΡΠ°ΠΌΠΌ. ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅, ΠΏΡΠΎΠΊΡΡΡΠΊΠ°), ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π°Π³Π΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ text-overflow: ellipsis ΠΊΠ°ΠΊ text-overflow: clip.
- ΠΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π²ΡΠ΄Π΅Π»ΠΈΡΡ ΡΠ΅ΠΊΡΡ Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ΠΌ. ΠΡΠ»ΠΈ Π²ΡΠ΄Π΅Π»Π΅Π½ Π²Π΅ΡΡ ΡΠ΅ΠΊΡΡ Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ΠΌ, UA Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ. ΠΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΠ°ΡΡΠΈΡΠ½ΠΎ Π²ΡΠ΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ΠΌ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ UA.
ΠΡΠΈΠΌΠ΅Ρ (Ρ):
ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°
ΠΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π±Π»ΠΎΠΊΠ°. Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ, Π²ΡΡ ΠΎΠ΄ΡΡΠΈΠΌ Π·Π° Π΅Π³ΠΎ ΠΏΡΠ΅Π΄Π΅Π»Ρ:
ΠΏΡΠΈΠΌΠ΅Ρ CSS Π΄Π»Ρ div:
div {font-family: Helvetica, sans-serif; line-height: 1.1; ΡΠΈΡΠΈΠ½Π°: 3.1em; ΠΎΡΡΡΡΠΏ: .2em; Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½Π°Ρ .1em ΡΠ΅ΡΠ½Π°Ρ; ΠΏΠΎΠ»Ρ: 1em0;}
ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² HTML, Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈ Π²Π°Ρ Π±ΡΠ°ΡΠ·Π΅Ρ:
HTML | ΠΎΠ±ΡΠ°Π·Π΅Ρ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° | Π²Π°Ρ Π±ΡΠ°ΡΠ·Π΅Ρ |
---|---|---|
| CSS Π£ΠΠΠΠΠ’ΠΠΠ¬ΠΠ«Π, ΠΠ | |
| CSS Π£ΠΠΠΠΠ’ΠΠΠ¬ΠΠ«Π, ΠΠ | |
| CSS Π£ΠΠΠΠΠ’ΠΠΠ¬ΠΠ«Π, ΠΠ | |
| Π ΠΠΠΠΠ©ΠΠΠΠ«Π ΠΠΠ ΠΠΠ ΠΠ€ ΠΠ ΠΠΠΠΠ‘ΠΠ. |
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΡΡΠΎΡΠΎΠ½Π° Π»ΠΈΠ½ΠΈΠΈ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅, Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ. ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠΊΡΡΡΠΎ ΡΠΏΡΠ°Π²Π° Π½Π°Π»Π΅Π²ΠΎ
(ΠΠ°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ : RTL
)
Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ»ΠΈΠΏΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ Ρ Π»Π΅Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ,
ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅Π²Π° ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΡΠ΅ΠΊΡΡΠ°, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΡΡΠΎ ΠΎΠ±ΡΠ΅Π·Π°Π½Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅.
ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°ΠΌΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ
ΠΡΠΎΡ ΡΠ°Π·Π΄Π΅Π» ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠ°, ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΎΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°: ΠΊΠ»ΠΈΠΏ (ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π±Π΅Π· ΠΊΠ»ΠΈΠΏΠ°) ΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΠΏΡΠΎΠΊΡΡΡΠΊΠ°.
ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠ° Π±Π΅Π· ΠΊΠ»ΠΈΠΏΠ° ΠΈΠΌΠ΅Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π²ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΌ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΠΎΠΌ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠ΅ΠΊΡΡΠ°, ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ»ΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΈΠ»ΠΈ ΡΠ΅Π½ΡΠΎΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π΄Π»Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈ Ρ. Π΄.), Π΅ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ»ΡΡΡΠ°ΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ:
ΠΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ,Π³ΡΠ°ΠΌΠΌ. ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ, ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ DOM), ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ text-overflow Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²Π»ΠΈΡΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π»ΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ Π½Π΅Ρ. ΠΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π±Π΅Π· ΠΊΠ»ΠΈΠΏΠ°, Π·Π°ΡΠ΅ΠΌ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΠ½Π°ΡΠ΅ Π±ΡΠ»ΠΎ Π±Ρ ΠΎΠ±ΡΠ΅Π·Π°Π½ΠΎ (ΠΈΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ, ΡΡΠΎΠ±Ρ ΠΎΡΠ²ΠΎΠ±ΠΎΠ΄ΠΈΡΡ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ / ΡΡΡΠΎΠΊΠΈ), ΠΏΠΎΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΊΡΡΡΠ΅Π½ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π°Π»Π΅ΠΊΠΎ ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΊΡΠ°ΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π² ΡΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ ΡΡΠΎΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π° Π½Π΅ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ / ΡΡΡΠΎΠΊΡ.
ΠΡΠΈΠΌΠ΅Ρ (Ρ):
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ. ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ΅ Π²ΡΡΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.
ΠΎΠ±ΡΠ°Π·Π΅Ρ CSS:
div. crawlbar {text-overflow: ellipsis; height: 2em; overflow: scroll; white-space: nowrap; width: 15em; border: 1em ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ;}
ΠΎΠ±ΡΠ°Π·Π΅Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ° HTML:
CSS Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ΅Π½, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ
ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π»ΠΈΡΠ½ΠΈΠΉ ΡΠ΅ΠΊΡΡ, Π° Π½Π΅ ΠΏΡΠΎΡΡΠΎ
ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π΅Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅ΠΊΡΡ.
Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΎΠ±ΡΠ°Π·ΡΠΎΠ² CSS ΠΈ HTML:
CSS — ΡΡΠΎ ΠΊΡΡΡΠΎ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΊΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π»ΠΈΡΠ½ΠΈΠΉ ΡΠ΅ΠΊΡΡ, Π° Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΎΠ½ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π΅Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ΅ΠΊΡΡ.
ΠΠΎΠΊΠ° ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΡΡ, ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³ ΡΠ»Π»ΠΈΠΏΡΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΠΏΠΎ ΠΊΡΠ°Ρ Π±Π»ΠΎΠΊΠ°, Π° Π½Π΅ ΠΏΠΎ ΠΊΡΠ°Ρ Π»ΠΈΠ½ΠΈΠΈ).
4.2. ΠΠ½Π΄ΠΈΠΊΠ°ΡΠΈΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΎΡΠΈ Π±Π»ΠΎΠΊΠ°: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
Π±Π»ΠΎΠΊΠ°-ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π² ΠΏΠΎΠ»Π΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΡΡΡΠΎΠΊΠΈ. ΠΏΠ΅ΡΠ΅Π΄ (ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈΠ»ΠΈ Π½Π΅Π²ΡΠ½ΡΠΆΠ΄Π΅Π½Π½ΡΠΌ) ΡΠ°Π·ΡΡΠ²ΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π½Π΅ΠΏΡΠ΅ΡΡΠ²Π½ΠΎΡΡΡ ΡΡΠ΅ΡΠ΅Π½Π½ΠΎΠ³ΠΎ / ΠΏΡΠ΅ΡΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ. ΠΠ½ Π²Π»ΠΈΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΡΡΠΎΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠ΅ΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² ΡΠ°ΠΌΠΎΠΌ Π±Π»ΠΎΠΊ-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅, Π½ΠΎ ΠΏΡΠΈ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠΈ Π±ΡΠ΄Π΅Ρ Π²Π»ΠΈΡΡΡ Π½Π° ΡΡΡΠΎΠΊΠΎΠ²ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², Π΅ΡΠ»ΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ. ΠΡΠ»ΠΈ Π² ΠΏΠΎΠ»Π΅ Π½Π΅Ρ ΡΡΡΠΎΠΊΠΈ, Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΡΠ΅Π΄ΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΉ ΡΠ°Π·ΡΡΠ²Ρ ΠΎΠ±Π»Π°ΡΡΠΈ, ΡΠΎ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π΄Π΅ΠΉΡΡΠ²ΡΠ΅Ρ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π‘ΠΌ. Β§5 Β«ΠΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈΒ», Π³Π΄Π΅ ΠΎΠΏΠΈΡΠ°Π½ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π±ΠΎΠΊΡΠΎΠ² Ρ ΡΠ°ΠΊΠΈΠΌ ΡΠ°Π·ΡΡΠ²ΠΎΠΌ ΠΎΠ±Π»Π°ΡΡΠΈ.
Π‘Π»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ Π΄ΡΡΠ³ΠΈΠΌ ΡΠΈΠΏΠ°ΠΌ ΡΠ°Π·ΡΡΠ²ΠΎΠ² ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ, ΡΡΠΎΠ»Π±ΡΠ°ΠΌ)?
ΠΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΠ»Π»ΠΈΠΏΡΠΈΡΠΎΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° .ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ:
- Π½Π΅Ρ
- Π Π΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΡΡ.
- Π°Π²ΡΠΎ
- ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠΉΡΠ΅ ΡΠΈΠΌΠ²ΠΎΠ» ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ (U + 2026) —
ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½Ρ — Π² Π²ΠΈΠ΄Π΅ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° Π² ΠΊΠΎΠ½ΡΠ΅ Π·Π°ΡΡΠΎΠ½ΡΡΠΎΠΉ ΡΡΡΠΎΠΊΠΈ. UA Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΡ ΡΠ·ΡΠΊΠ° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΡΠΈΡΡΠ΅ΠΌΠ° Π·Π°ΠΏΠΈΡΠΈ ΠΈ ΡΠ΅ΠΆΠΈΠΌ Π·Π°ΠΏΠΈΡΠΈ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ΅ΠΉ ΡΡΡΠΎΠΊΠΈ Ρ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ΠΌ. - <ΡΡΡΠΎΠΊΠ°>
- ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΡ ΡΡΡΠΎΠΊΡ ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° Π² ΠΊΠΎΠ½ΡΠ΅ Π·Π°ΡΡΠΎΠ½ΡΡΠΎΠΉ ΡΡΡΠΎΠΊΠΈ. UA ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΡΡΡ ΡΡΡΠΎΠΊΡ, Π΅ΡΠ»ΠΈ ΠΎΠ½Π° ΡΠ»ΠΈΡΠΊΠΎΠΌ Π΄Π»ΠΈΠ½Π½Π°Ρ.
ΠΡΠ»ΠΈ Π±Π»ΠΎΠΊ-ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ Π½Π΅ ΡΠ°Π²Π½ΠΎ none, ΡΡΡΠΎΠΊΠ° ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° Π·Π°Π²Π΅ΡΠ½ΡΡ Π² Π°Π½ΠΎΠ½ΠΈΠΌΠ½ΡΠΉ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΠΈ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΊΠΎΠ½Π΅Ρ ΡΡΡΠΎΠΊΠΈ ΠΏΠΎΠ»Ρ ΠΊΠ°ΠΊ ΠΏΡΡΠΌΠΎΠΉ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠΎΡΠ½Π΅Π²ΠΎΠ³ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π² ΡΡΡΠΎΡΠ½ΠΎΠΌ ΠΏΠΎΠ»Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ Π΄Π»Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΡΡΠΎΠΊΠΈ.ΠΡΠΎΠΌΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π°Π·Π½Π°ΡΠ°Π΅ΡΡΡ unicode-bidi: plaintext ΠΈ line-height: 0, ΠΈ ΠΎΠ½ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΏΠΎΠ»Π΅ ΡΡΡΠΎΠΊΠΈ ΠΏΠΎΡΠ»Π΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΌΡΠ³ΠΊΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠ° (ΡΠΌ. [CSS-TEXT-3]) ΡΡΠΎ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π½Π° Π»ΠΈΠ½ΠΈΠΈ Π²Π΅ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ Π±Π»ΠΎΠΊΠ°. ΠΠ»Ρ ΡΡΠΎΠΉ ΡΠ΅Π»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΌΡΠ³ΠΊΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠ°, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ-ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΎΠΌ, ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡΡΡ. ΠΡΠ»ΠΈ ΡΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π²ΡΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΡΡΠΎΠΊΠΈ ΡΡΡΠΎΠΊΠΈ, Π‘ΡΠΈΡΠ°Π΅ΡΡΡ, ΡΡΠΎ ΡΡΡΠΎΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΠΎΠΉΠΊΡ, ΠΊΠ°ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΎ Π² CSS 2.1 Β§10.8.1 ΠΠ°ΡΠ°Π»ΡΠ½ΡΠΉ ΠΈ ΠΏΠΎΠ»ΡΠ·Π°Ρ ΠΎΠ΄Π½ΡΠΉ. ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠΎΡΠ»Π΅ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΠΈ ΠΈΠ·ΠΌΠ΅ΡΡΠ΅Ρ Π²ΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΡΡΡΠΎΠΊΠΈ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ Π½Π° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° ΡΠ°Π²Π½ΠΎΠΉ 0 Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ Π΅Π³ΠΎ Π²ΡΡΠ°Π²ΠΊΠ° Π½Π΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Ρ ΠΊ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠΈΠ΅ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π½ΠΈΡ ΡΠ΅Π»Π΅ ΠΈ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠΈΠΊΠ»Ρ. ΠΡΠΎ ΠΏΠΎΡΡΠΈ ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎ Π²ΡΡΠ°Π²ΠΊΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ Π±Π»ΠΎΠΊΠ° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΎΠ½ΠΎ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΡΠ°ΡΡΠ²ΡΠ΅Ρ Π² Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠΈ ΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠΈ. ΠΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½ΠΎΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ Π½Π΅ΠΎΠ±ΡΡΠ½ΠΎ Π²ΡΡΠΎΠΊΠΈΠ΅ / Π³Π»ΡΠ±ΠΎΠΊΠΈΠ΅ Π³Π»ΠΈΡΡ Π² ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° ΠΌΠΎΠ³ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΡΡΡΡ.
ΠΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ Π·Π° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Π²ΠΊΠ»ΡΡΠ°ΡΡ Π½Π΅Π»ΡΠ·Ρ. Π² ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ :: first-letter ΠΈΠ»ΠΈ :: first-line.
ΠΡΠ»ΠΈ Π΅ΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ»ΡΡΠΈΡ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΡΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΡΠΌΠ΅ΡΠ΅Π½Π½ΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ΠΌ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°, Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ΠΎ Π² ΡΡΠΎΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ.
UA Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° ΠΊΠ°ΠΊ Π½Π΅ΡΠ°Π·ΡΡΠ²Π½ΡΡ ΡΡΡΠΎΠΊΡ, ΠΡΠ»ΠΈ ΠΊΠ°ΠΊΠ°Ρ-Π»ΠΈΠ±ΠΎ ΡΠ°ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠ° ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ, ΡΡΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, ΠΈ Π½Π° Π΅Π³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π»ΠΈΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ text-overflow.
ΠΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ Π±Π»ΠΎΠΊΠ° Π½Π΅ ΡΠΈΠΊΡΠΈΡΡΠ΅Ρ ΡΠΎΠ±ΡΡΠΈΡ: ΡΠΎΠ±ΡΡΠΈΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡΡΡ ΡΠΎΠΌΡ, ΡΡΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ΄ Π½ΠΈΠΌ.
Π’Π°ΠΊΠΆΠ΅ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠΎΡΠΎΠ±ΠΊΠΈ: Π΅Π³ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ Π±Π»ΠΎΠΊ-ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ Π½Π΅ Π±ΡΠ»ΠΎ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: Π±ΡΠ΄ΡΡΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ ΡΠ°ΡΡΠΈΡΠΈΡΡ ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ² ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ :: ellipsis ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ, ΠΈΠ»ΠΈ ΡΠ°Π·ΡΠ΅ΡΠΈΠ² Π²ΡΠ±ΠΎΡ Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π±Π»ΠΎΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ Π½Π° ΡΡΠΎΠ²Π½Π΅ ΡΡΡΠΎΠΊΠΈ ΠΈΠ»ΠΈ Π½Π° ΡΡΠΎΠ²Π½Π΅ Π±Π»ΠΎΠΊΠ° (Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΡ).
5. Π€ΡΠ°Π³ΠΌΠ΅Π½ΡΠΈΡΡΡΡΠ΅Π΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
5.1. ΠΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΠ΅ Π²ΠΈΠ΄ΠΈΠΌΡΡ Π»ΠΈΠ½ΠΈΠΉ: ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
.Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ line-clamp ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ² max-lines, block-ellipsis ΠΈ continue.
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΠΎΠ±Ρ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΠΌΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌΠΎΠΌΡ ΡΡΠΈΠΌ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ Π΅Π³ΠΎ Π΄Π»ΠΈΠ½Π½ΡΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ Π°Π²ΡΠΎΡΠ°ΠΌ ΡΡΠ΅Π½ΠΎΠ³ΡΠ°ΡΠΈΡ. ΠΡΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π»Π΅Π³ΡΠΈΡΡ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ, ΠΈ, Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅, ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ² ΠΈ ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ.
ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°. Π½Π° ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΡΠΎΠΊ; ΠΎΡΡΠ°Π²ΡΠ΅Π΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΎ ΠΈ Π½ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½, Π½ΠΈ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½. ΠΡΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΡΠ°Π²Π»ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² ΠΏΠΎΠ»Π΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΉ ΡΡΡΠΎΠΊΠΈ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ΠΏΡΠ΅ΡΡΠ²Π½ΠΎΡΡΠΈ ΡΡΠ΅ΡΠ΅Π½Π½ΠΎΠ³ΠΎ / ΠΏΡΠ΅ΡΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅:
- Π½Π΅Ρ
- Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΡΠΎΠΊ Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ none, ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΈ Π±Π»ΠΎΠΊ-ΠΌΠ½ΠΎΠ³ΠΎΡΠΎΡΠΈΠ΅ — Π½Π΅Ρ.
- <ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ>
- Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ max-lines Π² ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ <ΡΠ΅Π»ΠΎΠ΅ ΡΠΈΡΠ»ΠΎ>, ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΠΎΡΠ±ΡΠ°ΡΡΠ²Π°ΡΡ, ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π»ΠΈΠΏΡΠ° ΠΊΠΎ Π²ΡΠΎΡΠΎΠΌΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ, Π΅ΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ.
ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ ΡΠΌ. Π ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ ΠΏΠΎΠ»Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ . ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΡΠΎΡ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ.
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ Π°Π±Π·Π°Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠ°ΡΡΠΈ ΡΠΊΠ°Π·Π°Π½ Π² ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠΌ ΠΌΠ΅Π½Ρ, ΡΡΠ΅ΡΠ΅Π½ΠΎ Π΄ΠΎ 10 ΡΡΡΠΎΠΊ ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°ΡΡΡΡ Π½Π° Β«β¦ (ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅)Β»:li {line-clamp: 5 "β¦ (ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅)";} strong {display: block; text-transform: uppercase;}
ΠΡΠΈΠΌΠ΅Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ:
+ --------------------------------------- + | Π‘Π«Π ΠΠΠΠ‘Π’ΠΠΠ’ΠΠΠ¬ΠΠ ΠΠΠΠΠ’ΠΠΠΠΠ ΠΠ ΠΠΠΠΠΠ! | | ΠΡΡΠ½Π°Π»ΠΈΡΡΡ-ΡΠ°ΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π² ΠΌΠΈΡΠ΅ | | ΠΠΎΡΠΏΠΎΡΠ°ΡΠΈΡ Wide Web Press ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ»Π° | | ΡΠ΅ΠΊΡΠ΅Ρ ΡΡΡΠ°. ΠΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ | | Π²ΠΈΠ·Π°Π½ΡΠΈΠΉΡΠΊΠΈΠΉβ¦ (ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅) | + --------------------------------------- +
5.1.1. Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΌΠΈ Π²Π΅ΡΡΠΈΡΠΌΠΈ
ΠΠ»Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ Ρ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ UA, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠ΅ Π·Π°ΠΆΠΈΠΌ Π»ΠΈΠ½ΠΈΠΈ, ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ -webkit-line-clamp . ΠΠ°ΠΊ ΠΈ line-clamp, ΡΡΠΎ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΎΡ max-lines, continue ΠΈ block-ellipsis, ΠΊΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ:
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄Π»Ρ Π΄Π΅ΡΠ΅ΠΉ (Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Π°Π½ΠΎΠ½ΠΈΠΌΠ½ΡΡ Π΄Π΅ΡΠ΅ΠΉ) Π±Π»ΠΎΠΊΠΎΠ², ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΡΠΎΡΡΡ Π²ΡΡΠΈΡΠ»ΡΠ΅ΡΡΡ Π² -webkit-box ΠΈΠ»ΠΈ -webkit-inline-box, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² max-lines, continue ΠΈ block-ellipsis Π±Π΅ΡΡΡΡΡ ΠΈΠ· Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±ΠΎΠΊΡΠ°; Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² Π½Π° ΡΠ°ΠΌΠΎΠΌ Π±Π»ΠΎΠΊΠ΅ ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡΡΡ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ -webkit-discard Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ discard, Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΡΡΠΏΠ°Π΅Ρ Π² ΡΠΈΠ»Ρ Π΅ΡΠ»ΠΈ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ is -webkit-box ΠΈΠ»ΠΈ -webkit-inline-box ΠΈ Π²ΡΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° -webkit-box-orient Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° -webkit-line-clamp Π²Π΅Π»ΠΈ ΡΠ΅Π±Ρ Π½Π΅ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΡΠΊΠ°Π·Π°Π½ΠΎ Π·Π΄Π΅ΡΡ. ΠΡΡΠΎΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π΅ΠΎΠ±ΡΡΠ½ΠΎ ΠΈ ΠΌΠ΅Π½Π΅Π΅ Π½Π°Π΄Π΅ΠΆΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² ΡΡΠΎΠΌ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΈ Π² Π±Π»ΠΎΠ³Π΅.Π’Π΅ΠΊΡΡΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΡΠΈΡΡΡ Π½Π° ΠΎΡΠΈΠ±ΠΊΠ°Ρ ΡΠΎΠ³ΠΎ ΡΠ°Π½Π½Π΅Π³ΠΎ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°, ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎΠΉ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ Ρ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ ΡΡΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»ΠΈ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ. ΠΡΠ»ΠΈ Π±ΡΠ΄Π΅Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π² Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ , ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ Π²ΠΊΠ»ΡΡΠ΅Π½Ρ Π² ΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ. ΠΠ΅ΠΆΠ΄Ρ ΡΠ΅ΠΌ, Π°Π²ΡΠΎΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π½Π°ΡΡ, ΡΡΠΎ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π½Π΅ΡΠΎΡΠ½ΠΎΡΡΠΈ.
5.2. ΠΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΡΡΠ² ΠΏΠΎΡΠ»Π΅ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΡΡΡΠΎΠΊ: ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
max-linesΠΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π½Π΅ Π²Π»ΠΈΡΠ΅Ρ Π½Π° Π±Π»ΠΎΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΡΠ²Π»ΡΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°Ρ Π²Π°ΡΡΠ²Π°ΡΡ ΡΠ°Π·ΡΡΠ²Ρ ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ.
Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ max-lines Π½Π΅ ΡΠ°Π²Π½ΠΎ none , ΠΏΡΠΈΠ½ΡΠ΄ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΡΡΠ² ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΠΎΡΠ»Π΅ Π΅Π³ΠΎ N -Π³ΠΎ ΠΊΠΎΡΠΎΠ±ΠΊΡ Ρ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠΌ, Π³Π΄Π΅ N — ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ max-lines. Π£ΡΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΡΠ½ΡΠ΅ ΠΏΠΎΠ»Ρ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΠΊΠ°: ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΏΡΠΎΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΏΡΠΈ ΠΏΠΎΠ΄ΡΡΠ΅ΡΠ΅ ΡΡΡΠΎΠΊ.
ΠΡΠ»ΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ΅Π½Π΅Π΅ N ΡΡΡΠΎΡΠ½ΡΡ Π±Π»ΠΎΠΊΠΎΠ², ΡΠΎΠ³Π΄Π° max-lines Π½Π΅ Π²Π²ΠΎΠ΄ΠΈΡ ΡΠ°Π·ΡΡΠ² ΠΎΠ±Π»Π°ΡΡΠΈ.
ΠΠ°ΠΊ continue: discard Π½Π΅ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΏΠΎΠ΄ΡΡΠΈΡΡΠ²Π°ΡΡΡΡ ΡΡΡΠΎΠΊΠΈ Π²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Ρ Π·Π°ΠΆΠΈΠΌΠΎΠΌ Π»ΠΈΠ½ΠΈΠΈ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ Π½ΠΈΠΆΠ΅.a: ΡΡΡΠΎΠΊΠ° 1
a: ΡΡΡΠΎΠΊΠ° 2
b: ΡΡΡΠΎΠΊΠ° 1
b: ΡΡΡΠΎΠΊΠ° 2
b: ΡΡΡΠΎΠΊΠ° 3
b: ΡΡΡΠΎΠΊΠ° 4