Luo laatikko, jossa on vieritysteksti CSS: n ja HTML: n avulla
HTML- ruutu on ruutu, joka lisää vierityspalkit oikealle puolelle ja pohjalle, kun laatikon sisältö on suurempi kuin laatikon mitat. Toisin sanoen, jos sinulla on laatikko, joka sopii noin 50 sanaa ja sinulla on tekstiä 200 sanaa, HTML-vieritysruutu asettaa vierityspalkit ylös, jotta näet vielä 150 sanaa. Tavallisessa HTML-muodossa, joka yksinkertaisesti työntää ylimääräisen tekstin laatikon ulkopuolelle.
HTML-rullaaminen on melko helppoa. Sinun tarvitsee vain määrittää elementin leveys ja korkeus, jota haluat vierittää, ja käytä sitten CSS ylivuoto-ominaisuutta määrittääksesi, kuinka haluat vierityksen tapahtua.
Mitä tehdä ylimääräisellä tekstillä?
Kun sinulla on enemmän tekstiä kuin sopivat ulkoasun tilaan, sinulla on muutamia vaihtoehtoja:
- Kirjoita teksti uudelleen niin, että se on lyhyempi ja sopii.
- Salli tekstin kulkeutua rajojen yli ja toivottavasti ulkoasu voi taipua tukemaan sitä.
- Leikkaa teksti, jossa se ylittää.
- Lisää vierityspalkkeja (yleensä pystysuunnassa tekstiä varten) niin, että tilan vieritys näyttää ylimääräisen tekstin.
Paras vaihtoehto on tyypillisesti viimeinen vaihtoehto: luo rullaava tekstiruutu. Sitten lisätekstiä voidaan silti lukea, mutta suunnittelua ei vaaranneta.
HTML ja CSS tähän tarkoitukseen:
Ylivuoto: auto; kertoo selainta lisäämällä vierityspalkkeja, jos ne tarvitaan pitämään tekstin ylittämästä divin rajoja. Jotta tämä toimisi, sinun on myös oltava leveys- ja korkeusmuodostusominaisuudet, jotka on asetettu div: iin, jotta ylivuotoa voidaan rajoittaa.
Voit myös katkaista tekstin vaihtamalla ylivuotoa: auto; ylivuoto: piilotettu; Jos jätät ylivuoto-ominaisuuden, teksti kulkee divin rajojen yli.
Voit lisätä vierityspalkkeja muutakin kuin tekstiä varten
Jos sinulla on suuri kuva, jonka haluat näyttää pienemmässä tilassa, voit lisätä vierityspalkkeja sen ympärille samalla tavoin kuin tekstiä.
Tässä esimerkissä 400x509-kuva on 300x300-kappaleen sisällä.
Taulukot voivat hyötyä vierityspalkkeista
Pitkät taulukoiden tiedot saattavat olla erittäin vaikeita lukea hyvin nopeasti, mutta asettamalla ne pieneen kokoiseen divaan ja lisäämällä ylivuoto-ominaisuuden, voit tuottaa taulukoita, joissa on paljon tietoja, jotka eivät vie äärimmäistä tilaa sivullesi .
Helpoin tapa on aivan kuin kuvien ja tekstin kanssa, vain lisätä divin pöydän ympärille, määritellä kyseisen divin leveys ja korkeus ja lisätä ylivuotomainen ominaisuus:
Yksi asia, joka tapahtuu, kun tämä tehdään, on yleensä vaakasuora vierityspalkki, koska selain olettaa, että vierityspalkkien kromi on päällekkäinen taulukon kanssa. On monia tapoja korjata tämä muuttamatta taulukon leveyttä ja muita. Mutta suosikkini on yksinkertaisesti sammuttaa horisontaalinen vieritys CSS 3: n omaisuuden ylivuoto-x: llä. Lisää ylivuoto-x: piilotettu; ja se poistaa horisontaalisen vierityspalkin. Varmista, että kokeilet tätä, koska sisältö saattaa kadota.
Firefox tukee ylimääräisen TBODY-tunnisteen käyttöä
Firefox-selaimella on todella mukava ominaisuus, että voit käyttää ylivuoto-ominaisuutta sisäpöydän tunnisteissa, kuten tbody ja thead tai tfoot. Tämä tarkoittaa, että voit asettaa vierityspalkit taulukon sisältöön ja otsikkosolut pysyvät ankkuroituna niiden yläpuolella. Tämä toimii vain Firefoxissa , mikä on huono, mutta se on mukava ominaisuus, jos lukijat käyttävät vain Firefoxia. Selaa tähän esimerkkiin Firefoxissa nähdäksesi, mitä tarkoitan.
| Nimi | Puhelin |
|---|---|
| Jennifer | 502-5366
|