Lumikha ng isang kahon na may scroll na teksto gamit ang CSS at HTML
Ang isang HTML scroll box ay isang kahon na nagdaragdag ng mga scroll bar sa kanang bahagi at ibaba kapag ang mga nilalaman ng kahon ay mas malaki kaysa sa mga sukat ng kahon. Sa ibang salita, kung mayroon kang isang kahon na maaaring magkasya sa paligid ng 50 salita, at mayroon kang teksto ng 200 salita, isang kahon ng scroll ng HTML ay maglalagay ng scroll bar upang hayaang makita mo ang karagdagang 150 salita. Sa karaniwang HTML na itulak lamang ang sobrang teksto sa labas ng kahon.
Ang paggawa ng HTML scroll ay medyo madali. Kailangan mo lamang i-set ang lapad at taas ng elemento na gusto mong i-scroll at pagkatapos ay gamitin ang ari-arian ng CSS overflow upang itakda kung paano mo nais maganap ang scroll.
Ano ang gagawin sa Extra Text?
Kapag mayroon kang higit pang teksto kaysa sa magkasya sa espasyo sa iyong layout, mayroon kang ilang mga pagpipilian:
- Isulat muli ang teksto upang mas maikli at magkasya.
- Pahintulutan ang teksto na dumaloy nang lampas sa mga hangganan at umaasa na ang layout ay maaaring ibaluktot upang suportahan ito.
- Putulin ang teksto kung saan ito overflows.
- Magdagdag ng scroll bar (karaniwan ay vertical para sa teksto) upang ang mga puwang ay mag-scroll upang ipakita ang sobrang teksto.
Ang pinakamagandang opsyon ay karaniwang ang huling opsyon: lumikha ng isang scroll box box. Pagkatapos ay maaari pa ring basahin ang sobrang teksto, ngunit ang iyong disenyo ay hindi nakompromiso.
Ang HTML at CSS para dito ay magiging:
Ang overflow: auto; Sinasabi sa browser na magdagdag ng mga scroll bar kung kinakailangan ang mga ito upang panatilihin ang teksto mula sa pag-apaw sa mga hangganan ng div. Ngunit upang magawa ito, kailangan mo rin ang mga katangian ng estilo ng lapad at taas na naka-set sa div, upang mayroong mga hangganan sa pag-apaw.
Maaari mo ring putulin ang teksto sa pamamagitan ng pagbabago ng overflow: auto; upang mapuno: nakatago; Kung iwan mo ang pag-overflow property, ang teksto ay mag-iipon sa mga hangganan ng div.
Maaari mong Magdagdag ng Mag-scroll Bar sa Higit sa Text lamang
Kung mayroon kang isang malaking larawan na nais mong ipakita sa isang mas maliit na espasyo, maaari kang magdagdag ng mga scroll bar sa paligid nito sa parehong paraan na gusto mo sa teksto.
Sa halimbawang ito, ang 400x509 na imahe ay nasa loob ng 300x300 na talata.
Maaaring Makinabang ang mga Table mula sa Mga Bars ng Mag-scroll
Ang mahabang mga talahanayan ng impormasyon ay maaaring maging napakahirap magbasa nang napakabilis, ngunit sa pamamagitan ng paglalagay ng mga ito sa loob ng isang div ng isang limitadong sukat at pagdaragdag ng overflow property, maaari kang gumawa ng mga talahanayan na may maraming data na hindi tumagal ng matinding espasyo sa iyong pahina .
Ang pinakamadaling paraan ay tulad ng mga imahe at teksto, idagdag lamang ang div sa palibot ng talahanayan, itakda ang lapad at taas ng div na iyon, at idagdag ang overflow property:
| Name | Phone Jennifer | 502-5366 .... Ang isang bagay na nangyayari kapag ginawa mo ito ay karaniwang lumilitaw ang horizontal scroll bar dahil ipinapalagay ng browser na ang chrome ng mga scroll bar ay nagpapang-abot sa talahanayan. Maraming mga paraan upang ayusin ito mula sa pagpapalit ng lapad ng talahanayan at iba pa. Ngunit ang aking paborito ay i-off lang ang pahalang na pag-scroll gamit ang overflow-x na property ng CSS 3. Lamang magdagdag ng overflow-x: nakatago; sa div, at aalisin ang pahalang na scroll bar. Siguraduhin na subukan ito, dahil maaaring may nilalaman na mawala. Sumusuporta sa Firefox Gamit ang TBODY Tags para sa OverflowAng isang talagang magandang tampok ng browser ng Firefox ay maaari mong gamitin ang overflow na ari-arian sa panloob na mga tag ng table tulad ng tbody at thead o tfoot. Nangangahulugan ito na maaari kang magtakda ng mga scroll bar sa mga nilalaman ng table, at ang mga header ng cell ay mananatiling naka-angkat sa itaas ng mga ito. Gumagana lamang ito sa Firefox , na kung saan ay masyadong masama, ngunit ito ay isang magandang tampok kung ang iyong mga mambabasa lamang ang gumagamit ng Firefox. Mag-browse sa halimbawang ito sa Firefox upang makita kung ano ang ibig kong sabihin.
|
|---|