Creu blwch gyda thestun sgrolio gan ddefnyddio CSS a HTML
Blwch sgrolio HTML yw blwch sy'n ychwanegu bariau sgrolio i'r ochr dde a'r gwaelod pan fo cynnwys y blwch yn fwy na'r dimensiynau blwch. Mewn geiriau eraill, os oes gennych flwch a all ffitio tua 50 o eiriau, ac os oes gennych destun o 200 o eiriau, bydd blwch sgrolio HTML yn rhoi bariau sgrolio i fyny i ganiatáu i chi weld y 150 o eiriau ychwanegol. Yn HTML safonol, byddai hynny'n syml yn gwthio'r testun ychwanegol y tu allan i'r blwch.
Mae gwneud sgrolio HTML yn weddol hawdd. Mae'n rhaid i chi ond osod lled a uchder yr elfen yr ydych am ei sgrolio ac yna defnyddiwch eiddo gorlifo CSS i osod sut rydych chi am i'r sgrolio ddigwydd.
Beth i'w wneud gyda thestun ychwanegol?
Pan fydd gennych fwy o destun na fydd yn ffitio yn y gofod ar eich cynllun, mae gennych rai opsiynau:
- Ailysgrifennwch y testun fel ei fod yn fyrrach a bydd yn ffitio.
- Gadewch i'r testun fynd y tu hwnt i'r ffiniau a gobeithio y gall y cynllun fod yn hyblyg i'w gefnogi.
- Torrwch y testun lle mae'n gorlifo.
- Ychwanegu bariau sgrolio (fel arfer fertigol ar gyfer testun) fel bod y gofod yn sgrolio i ddangos y testun ychwanegol.
Yr opsiwn gorau fel arfer yw'r opsiwn olaf: creu blwch testun sgrolio. Yna gellir darllen testun ychwanegol o hyd, ond nid yw eich dyluniad yn cael ei gyfaddawdu.
HTML a CSS ar gyfer hyn fyddai:
Mae'r gorlif: auto; yn dweud wrth y porwr ychwanegu bariau sgrolio os oes angen iddynt gadw'r testun rhag gorlifo ffiniau'r div. Ond er mwyn i hyn weithio, mae angen hefyd yr eiddo arddull lled a thaldra a osodir ar y div, fel bod ffiniau'n gorlifo.
Gallwch hefyd dorri'r testun trwy newid gorlif: auto; i orlifo: cudd ;. Os byddwch yn gadael yr eiddo gorlifo, bydd y testun yn troi ffiniau'r div.
Gallwch chi ychwanegu Bariau Sgrolio i Fwy na Testun yn Unig
Os oes gennych ddelwedd fawr yr hoffech ei arddangos mewn lle llai, gallwch ychwanegu bariau sgrolio o'i gwmpas yn yr un modd â chi gyda thestun.
Yn yr enghraifft hon, mae'r delwedd 400x509 o fewn paragraff 300x300.
Gall Tablau Fanteisio ar Farsiau Sgrolio
Gall tablau hir o wybodaeth fod yn anodd iawn i'w darllen yn gyflym iawn, ond trwy eu rhoi mewn div o faint cyfyngedig ac yna ychwanegu'r eiddo gorlifo, gallwch gynhyrchu tablau gyda llawer o ddata nad ydynt yn cymryd lle eithafol ar eich tudalen .
Mae'r ffordd hawsaf yr un fath â delweddau a thestun, dim ond ychwanegu div o gwmpas y bwrdd, gosodwch lled a thaldra'r div hwnnw, ac ychwanegwch yr eiddo gorlif:
| Name | Phone | ||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... Un peth sy'n digwydd pan fyddwch chi'n gwneud hyn yw bar sgrolio llorweddol fel arfer yn ymddangos oherwydd bod y porwr yn tybio bod crome y bariau sgrolio yn gorgyffwrdd â'r tabl. Mae yna lawer o ffyrdd i ddatrys hyn rhag newid lled y bwrdd ac eraill. Ond fy hoff ffefr yw syml i ffwrdd sgrolio llorweddol gydag eiddo CSS 3 gorlifo-x. Dim ond ychwanegu gorlif-x: cudd; i'r div, a bydd hynny'n dileu'r bar sgrolio llorweddol. Gwnewch yn siŵr eich bod yn profi hyn, gan y gallai fod cynnwys sy'n diflannu. Mae Firefox yn Cefnogi Defnyddio'r Tagiau TBODY ar gyfer OverflowUn nodwedd wirioneddol wych o'r porwr Firefox yw y gallwch chi ddefnyddio'r eiddo gorlifo ar tagiau tabl mewnol fel tbody a thead neu tfoot. Mae hyn yn golygu y gallwch osod bariau sgrolio ar gynnwys y bwrdd, ac mae'r celloedd pennawd yn aros yn angor uwchben iddynt. Mae hyn ond yn gweithio yn Firefox , sydd yn rhy ddrwg, ond mae'n nodwedd braf os yw eich darllenwyr yn defnyddio Firefox yn unig. Dewch i'r enghraifft hon yn Firefox i weld beth rwy'n ei olygu.
|