Par overflowīpašuma kontroli, kas notiek ar saturu, kas pārtraukumi esot ārpus tās robežām: iedomājieties div, kurā esat skaidri noteikts, ka ir 200px plats, bet satur attēlu, kas ir 300px plats. Šis attēls paliks ārā no div un būs visiblepēc noklusējuma. Savukārt, ja jūs iestatīsit overflowvērtību uz hidden, attēls tiks nogriezts ar 200 pikseļiem.
div ( overflow: visible | hidden | scroll | auto | inherit )Vērtības
visible: saturs netiek apgriezts, kad tas turpinās ārpus kastes. Šī ir īpašuma noklusējuma vērtībahidden: pārpildītais saturs tiks paslēpts.scroll: līdzīgs slēptajam, izņemot to, ka lietotāji varēs ritināt slēpto saturuauto: ja saturs turpinās ārpus tā lodziņa, šis saturs tiks paslēpts, savukārt ritināšanas joslai jābūt redzamai lietotājiem, lai viņi varētu izlasīt pārējo saturu.initial: izmanto noklusējuma vērtību, kas irvisibleinherit: iestata pārplūdi tā vecāka elementa vērtībai.
Atcerieties, ka teksts dabiski ietīsies elementa beigās (ja vien nemainīs atstarpi), tāpēc teksts reti būs pārpildes cēlonis. Ja vien nav iestatīts augstums, teksts spiež arī kādu elementu garāku. Pārplūde parādās biežāk, ja tiek noteikti nepārprotami platumi un augstumi, un nebūtu vēlams, lai kāds saturs izplūstu, vai ja skaidri tiek novērsta ritināšana.
Redzams
Ja pārpildes rekvizītu nemaz neesat iestatījis, ir redzama noklusējuma vērtība. Tāpēc vispār nav iemesla skaidri iestatīt šo rekvizītu kā redzamu, ja vien jūs to neuzrādāt, lai tas netiktu iestatīts citur.
Šeit ir svarīgi atcerēties, ka, lai arī saturs ir redzams ārpus lodziņa, šis saturs neietekmē lapas plūsmu. Piemēram:
Parasti jums nevajadzētu noteikt statisko augstumu lodziņiem, kuros ir tīmekļa teksts, tāpēc tam nevajadzētu parādīties.
Slēpts
Pretējā noklusējuma redzamajam ir paslēpta . Tas burtiski slēpj jebkuru saturu, kas pārsniedz lodziņu.
Tas ir īpaši noderīgi, ja tiek izmantots dinamisks saturs un pārplūdes iespēja, kas rada nopietnas izkārtojuma problēmas. Tomēr paturiet prātā, ka šādā veidā paslēpts saturs ir pilnīgi nepieejams (tuvu avota aplūkošanai). Tā, piemēram, lietotājam ir iestatīts noklusējuma fonta lielums, nekā jūs varētu gaidīt, iespējams, jūs izstumjat tekstu ārpus lodziņa un pilnībā to paslēpjat no viņa skata.
Ritiniet
Uzstādot lodziņa pārpildes vērtību, lai ritinātu, saturs tiks paslēpts no renderēšanas ārpus lodziņa, taču tiks piedāvātas ritjoslas, lai ritinātu lodziņa iekšpusi, lai skatītu saturu.
Ar šo vērtību jāatzīmē, ka jūs saņemat GAN horizontālas, gan vertikālas ritjoslas neatkarīgi no tā, pat ja saturam nepieciešams tikai viens vai otrs.
iOS impulsa ritināšanu šai vērtībai var iespējot ar -webkit-overflow-scrolling.
Piezīme: Ja OS X Lion ir iestatīts, lai ritjoslas tiktu rādītas tikai tad, kad tās tiek izmantotas, tā scrolldarbojas vairāk kā autotādā veidā, ka tiks parādītas tikai nepieciešamās ritjoslas.
Automātiski
Automātiskā pārpilde ir ļoti līdzīga ritināšanas vērtībai, tikai tā atrisina ritjoslu iegūšanas problēmu, kad jums tās nav vajadzīgas. Ritjoslas tiks parādītas tikai tad, ja ir saturs, kas faktiski izlaužas no elementa.
pārplūde-x un pārplūde-y
Var arī manipulēt ar satura pārpildi horizontāli vai vertikāli ar overflow-xun overflow-yīpašībām. Piemēram, demonstrācijā zem horizontālās pārpildes var ritināt, kamēr teksts, kas pārsniedz lodziņa augstumu, ir paslēpts:
.box ( overflow-y: hidden; overflow-x: scroll; )Pludiņa tīrīšana
Dīvainā kārtā viens no populārākajiem pārplūdes iestatīšanas veidiem ir pludiņa tīrīšana. Pārplūdes iestatīšana nenoņem elementa pludiņu, tas pats notīra. Tas nozīmē, ka elements ar pārplūdi (jebkura vērtība, izņemot visible), paplašināsies tik liels, cik nepieciešams, lai aptvertu iekšpusē esošos bērnu elementus, kas tiek peldēti (nevis sabrūk), pieņemot, ka augstums nav deklarēts. Kā šis:
Labāka pludiņa tīrīšanas tehnika ir clearfix, jo tas neprasa mainīt pārpildes rekvizītus jums nevajadzīgā veidā.
Bloka formatēšanas konteksta ģenerēšana
Interesanti atzīmēt, ka overflowtiks izveidots arī jauns bloka formatēšanas konteksts, kas ir noderīgs, ja mēs vēlamies izlīdzināt bloka elementu blakus peldošajam. Tālāk sniegtajā piemērā mēs parādām, kā rindkopu skaits pēc noklusējuma mijiedarbosies ar peldošu attēlu, un pēc tam mēs izmantojam overflow: hiddenteksta izlīdzināšanu savā lodziņā:
Tas nāk no lieliskā Nicole Sullivan ziņa, kas turpināja iedvesmot mediju objektu.
Vai ritjoslas var veidot ar CSS?
Jūs agrāk varējāt stilizēt ritjoslas IE (v5.5?), Bet ne vairāk. Tagad tos var atkal veidot WebKit pārlūkprogrammās. Ja jums ir nepieciešamas dažādu pārlūku pielāgotas ritjoslas, meklējiet JavaScript.
Ja elementam ir jāpievieno ritjoslas, lai ievērotu pārpildes vērtību, Firefox tos ievieto ārpus elementa, saglabājot redzamo platumu / augstumu, kā norādīts. IE ieliek ritjoslas iekšpusē, saglabājot deklarēto kopējo platumu / augstumu.
Demonstrācija
Šī raksta demonstrācijas ir ņemtas no šīs parauga lapas.
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 91 | 87 | 11 | 88 | TP |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | 14.0-14.4 |
Saistīts
- Peldošais īpašums
Vairāk informācijas
- Izpratne par pazemīgo Clearfix
- Pārplūde: slepens ieguvums
- MDN pārpilde
- Pārplūde uz W3C
- Neparedzētas ķermeņa pārpildes atrašana / fiksēšana