Paghimo og usa ka kahon nga adunay scroll nga teksto gamit ang CSS ug HTML
Ang usa ka kahon sa scroll sa HTML usa ka kahon nga nagdugang sa scroll bars sa tuo nga bahin ug sa ubos kon ang sulod sa kahon mas dako kay sa mga sukod sa kahon. Sa laing pagkasulti, kung ikaw adunay kahon nga makaigo sa mga 50 ka mga pulong, ug adunay 200 ka mga pulong nga adunay usa ka HTML scroll box nga magbutang sa scroll bar aron makita nimo ang dugang 150 nga mga pulong. Sa standard HTML nga yano nga magduso sa dugang nga teksto sa gawas sa kahon.
Ang paghimo sa scroll nga HTML sayon ra kaayo. Kinahanglan mo lamang nga ibutang ang gilapdon ug gitas-on sa elemento nga imong gusto nga mag-scroll ug unya gamiton ang CSS overflow property aron ibutang kon unsaon nimo nga mahitabo ang pag-scroll.
Unsay buhaton sa Ekstrang Teksto?
Sa diha nga adunay daghan ka nga teksto kay sa mahaum sa luna sa imong layout, adunay pipila ka mga kapilian:
- Isulat pag-usab ang teksto aron kini mas mubo ug angayan.
- Tugoti ang teksto sa pagdagayday sa mga utlanan ug sa paglaum nga ang layout mahimong magamit sa pagsuporta niini.
- Guntinga ang teksto diin kini nagaawas.
- Idugang ang mga scroll bars (nga kasagaran nagbarug alang sa teksto) aron ang mga linukot nga mga linukot sa pagpakita sa dugang nga teksto.
Ang pinakamaayo nga kapilian mao ang katapusan nga kapilian: paghimo og scrolling text box. Dayon ang sobra nga teksto mahimo gihapon nga basahon, apan ang imong desinyo dili makompromiso.
Ang HTML ug CSS alang niini mao ang:
Ang pag-awas: auto; nagsulti sa browser aron makadugang sa mga scroll bars kung kini gikinahanglan aron mapabilin ang teksto gikan sa pag-awas sa mga utlanan sa div. Apan aron kini molihok, gikinahanglan usab nimo ang gilapdon ug gitas-on nga mga kabtangan sa estilo nga gibutang sa div, aron adunay mga utlanan nga magaawas.
Mahimo usab nimo maputol ang teksto pinaagi sa pag-usab sa overflow: auto; sa pag-awas: gitago; Kon imong biyaan ang overflow property, ang teksto mahitabo sa mga utlanan sa div.
Mahimo Nimong Idugang ang Mga Balang-scroll sa Dili Pa Ma-Text
Kon ikaw adunay usa ka dako nga imahen nga gusto nimo nga ipakita sa usa ka mas gamay nga luna, ikaw makadugang sa scroll bar diha sa palibot niini sa samang paagi nga imong gamiton sa teksto.
Sa niini nga pananglitan, ang 400x509 nga larawan anaa sa sulod sa 300x300 nga parapo.
Ang mga Tables Makabenepisyo gikan sa mga Bar sa Linukot nga Basahon
Ang taas nga mga lamesa sa kasayuran mahimong lisud kaayo sa pagbasa nga dali, apan pinaagi sa pagbutang niini sa sulod sa usa ka limitado nga gidak-on ug dayon pagdugang sa overflow property, mahimo ka makamugna og mga lamesa nga daghang mga datos nga dili moabut sa hilabihan nga luna sa imong panid .
Ang labing sayon nga paagi susama sa mga hulagway ug teksto, idugang ang div sa palibot sa lamesa, ibutang ang gilapdon ug gitas-on sa div, ug dugangi ang overflow property:
| Name | Phone Jennifer | 502-5366 .... Ang usa ka butang nga mahitabo kon imo kining buhaton mao ang usa ka pinahigda nga scroll bar nga kasagaran makita tungod kay ang browser nag-ingon nga ang chrome sa mga scroll bar nag-overlap sa lamesa. Adunay daghang mga paagi aron ayuhon kini gikan sa pag-usab sa gilapdon sa lamesa ug uban pa. Apan ang akong paborito mao ang pagputol sa pinahigang pag-scroll gamit ang CSS 3 property overflow-x. Pagdugang lamang sa overflow-x: gitago; sa div, ug kana magwagtang sa horizontal scroll bar. Siguruha nga sulayan kini, tungod kay dunay sulod nga mahanaw. Ang Firefox nagsuporta sa paggamit sa TBODY Tags for OverflowAng usa ka nindot nga feature sa browser nga Firefox mao nga mahimo nimo gamiton ang overflow property sa sulod nga mga tag sa lamesa sama sa tbody ug thead o tfoot. Kini nagpasabot nga mahimo ka magtakda og mga scroll bar diha sa sulod sa lamesa, ug ang mga header sa mga selula magpabilin nga nakaangkla labaw sa kanila. Kini nagabuhat lamang sa Firefox , nga dili maayo, apan kini usa ka nindot nga bahin kon ang imong mga magbabasa mogamit lamang sa Firefox. Tan-awa sa niini nga pananglitan sa Firefox aron makita kung unsa ang akong buot ipasabut.
|
|---|