Sukurkite dėžutę su slenkamuoju tekstu naudodami CSS ir HTML
HTML slinkties laukelis yra langelis, kuris prideda slinkties juostas į dešinę ir apačią, kai dėžutės turinys yra didesnis nei dėžutės matmenys. Kitaip tariant, jei turite dėžutę, kuri gali tilpti maždaug 50 žodžių, o jūs turite 200 žodžių tekstą, HTML slinkties laukelis sukurs slinkties juostas, kad galėtumėte matyti papildomus 150 žodžių. Standartiniame HTML, kuris paprasčiausiai išspausdins papildomą tekstą lauke.
HTML leidimas yra gana lengvas. Jums tik reikia nustatyti elemento, kurį norite slinkti, plotis ir aukštis, tada naudokite CSS perpildymo savybę, norėdami nustatyti, kaip norite, kad būtų vykdomas slinkimas.
Ką daryti su papildomu tekstu?
Jei turite daugiau teksto nei talpinsite savo išdėstymo vietoje, turėsite keletą parinkčių:
- Perrašykite tekstą taip, kad jis būtų trumpesnis ir tinka.
- Leiskite teksto judėti už ribų ir tikiuosi, kad išdėstymas gali būti lankstus, kad jį palaikytų.
- Iškirpti tekstą, kuriame jis perpildomas.
- Įtraukite slinkties juostas (paprastai vertikalią tekstą), kad erdvė būtų pažymėta, kad būtų rodomas papildomas tekstas.
Geriausias variantas paprastai yra paskutinis variantas: sukurkite slinkties teksto laukelį. Tada papildomą tekstą vis tiek galima perskaityti, bet jūsų dizainas nėra pažeistas.
HTML ir CSS tai būtų:
Perpildymas: automatinis; pasakoja naršyklei pridėti slinkties juostas, jei jie reikalingi, kad tekstas nepatektų į divo ribas. Tačiau norint, kad tai veiktų, jums taip pat reikia nustatyti div ir pločio ir aukščio stiliaus savybes, kad būtų ribos perpildymui.
Taip pat galite iškirpti tekstą, pakeisdami perpildymą: auto; perpildyti: paslėpti ;. Jei nepaliksite perpildymo nuosavybės, tekstas taps virš divų ribų.
Galite pridėti slinkties juostas į daugiau nei tiesiog tekstą
Jei turite didžiulį vaizdą, kurį norite rodyti mažesnėje erdvėje, galite pridėti slinkties juostas aplink jį taip pat, kaip ir su tekstu.
Šiame pavyzdyje 400x509 paveikslėlis yra 300x300 taškų.
Lentelės gali būti naudingos slinkties juostoms
Ilgus informacijos lenteles labai sunku perskaityti labai greitai, tačiau juos įdedant į riboto dydžio dubliką ir pridėjus perpildymo nuosavybę, galite kurti lenteles su daugybe duomenų, kurie jūsų puslapyje nepadaro ekstremalios vietos. .
Lengviausias būdas yra tarsi su vaizdais ir tekstu, tiesiog pridėkite div aplink stalą, nustatykite šio divo plotį ir aukštį ir pridėti perpildymo nuosavybę:
| Jennifer | 502-5366 .... Vienas dalykas, kuris atsitinka, kai tai atliekate, paprastai būna horizontalus slinkties juostos, nes naršyklė daro prielaidą, kad slinkties juostų chromas sutampa su lentele. Yra keletas būdų tai išspręsti, keičiant lentelės plotį ir kitus. Bet mano mėgstamiausia paprasčiausiai išjungti horizontalųjį slinkimą naudojant CSS 3 nuosavybės perpildymą-x. Tiesiog pridėkite perpildymą-x: paslėpta; į div ir pašalins horizontalųjį slinkties juostą. Būtinai patikrinkite tai, nes gali būti turinys, kuris išnyksta. "Firefox" palaiko "TBODY" žymų naudojimą perpildymuiVienas tikrai gražus "Firefox" naršyklės bruožas yra tai, kad galite naudoti perpildymo savybę vidinės lentelės žymes, pvz., "Tdody" ir "thead" arba "tfoot". Tai reiškia, kad galite nustatyti slinkties juostas ant lentelės turinio, o antraštės ląstelės užfiksuojamos virš jų. Tai veikia tik " Firefox" , kuris yra pernelyg blogas, tačiau tai yra puiki priemonė, jei jūsų skaitytojai naudoja tik "Firefox". Peržiūrėkite šį "Firefox" pavyzdį, kad galėtumėte sužinoti, ką aš turiu galvoje.
|