Sukurkite langelį su slenkančiu tekstu naudodami CSS ir HTML

An HTML slinkties laukelis yra langelis, pridedantis slinkties juostas dešinėje ir apačioje, kai langelio turinys yra didesnis nei langelio matmenys. Kitaip tariant, jei turite langelį, kuriame telpa apie 50 žodžių, o tekstą sudaro 200 žodžių, HTML slinkties laukelyje bus rodomos slinkties juostos aukštyn, kad pamatytumėte papildomus 150 žodžių. Standartiniame HTML, kuris tiesiog nustumtų papildomą tekstą už laukelio ribų.

HTML slinkimas yra gana lengvas. Jums tiesiog reikia nustatyti plotį ir ūgio elemento, kurį norite slinkti, tada naudokite CSS ypatybė perpildyti, kad nustatytumėte, kaip norite, kad slinkimas vyktų.

Ką daryti su papildomu tekstu?

Kai turite daugiau teksto, nei telpa jūsų maketo vietoje, turite keletą parinkčių:

• Perrašykite tekstą taip, kad jis būtų trumpesnis ir tilptų.
• Leiskite tekstui peržengti ribas ir tikimės, kad išdėstymas gali jį palenkti.
• Iškirpkite tekstą ten, kur jis perpildytas.
• Pridėkite slinkties juostas (paprastai vertikalias tekstui), kad tarpas slinktų, kad būtų rodomas papildomas tekstas.

Geriausias variantas paprastai yra paskutinis variantas: sukurkite slenkantį teksto laukelį. Tada papildomą tekstą vis tiek galima perskaityti, tačiau jūsų dizainas nėra pažeistas.

HTML ir CSS tai būtų:

tekstas čia... 

The perpildymas: automatinis; liepia naršyklei pridėti slinkties juostų, jei jos reikalingos, kad tekstas neperpildytų div ribų. Tačiau norint, kad tai veiktų, jums taip pat reikalingos „div“ pločio ir aukščio stiliaus savybės, kad būtų perpildytos ribos.

Taip pat galite iškirpti tekstą pakeisdami perpildymą: auto; į perteklius paslėptas; Jei paliksite perpildymo ypatybę, tekstas pasklis per div ribas.

Slinkties juostas galite pridėti ne tik prie teksto

Jei turite didelį vaizdą, kurį norite rodyti mažesnėje erdvėje, aplink jį galite pridėti slinkties juostų taip pat, kaip ir su tekstu.

Šiame pavyzdyje 400x509 vaizdas yra 300x300 pastraipos viduje.

Lentelės gali būti naudingos slinkties juostoms

Ilgas informacijos lenteles labai sunku perskaityti, tačiau jas įdėjus į riboto dydžio div tada pridėdami perpildymo ypatybę, galite sugeneruoti lenteles su daugybe duomenų, kurie neužima ypatingos vietos jūsų puslapis.

Lengviausias būdas yra panašus į vaizdus ir tekstą, tiesiog pridėkite „div“ aplink lentelę, nustatykite „div“ plotį ir aukštį ir pridėkite perpildymo ypatybę:

... 

Tai padarius, horizontaliai slenkanti juosta paprastai pasirodo, nes naršyklė daro prielaidą, kad slinkties juostų chromas sutampa su lentele. Yra daugybė būdų, kaip tai ištaisyti, keičiant stalo plotį ir kitus. Bet mūsų mėgstamiausia yra tiesiog išjungti horizontalųjį slinkimą naudojant CSS 3 ypatybę perpildymas-x

Tiesiog pridėkite overflow-x: paslėpta; prie div, ir tai pašalins horizontalią slinkties juostą. Būtinai išbandykite tai, nes gali būti, kad dingsta turinys.

„Firefox“ palaiko TBODY žymų naudojimą perpildymui

Viena tikrai graži „Firefox“ naršyklės savybė yra ta, kad galite naudoti perpildymo ypatybę vidinėse lentelės žymose, pvz., „Tbody“ ir „thead“ ar „tfoot“. Tai reiškia, kad lentelės turinyje galite nustatyti slinkties juostas, o antraštės langeliai lieka įtvirtinti virš jų. Tai veikia tik „Firefox“, kuris yra per blogai, tačiau tai yra puiki funkcija, jei jūsų skaitytojai naudoja tik „Firefox“. Naršykite pagal šį „Firefox“ pavyzdį ir sužinokite, ką turiu omenyje.

... VardasTelefonasJennifer502-5366. 

...