Luo vieritysteksti laatikko CSS: n ja HTML: n avulla

An HTML vieritysruutu on laatikko, joka lisää vierityspalkit oikealle puolelle ja alareunaan, kun laatikon sisältö on suurempi kuin laatikon mitat. Toisin sanoen, jos sinulla on laatikko, johon mahtuu noin 50 sanaa, ja sinulla on 200 sanan teksti, HTML-vieritysruutu laittaa vierityspalkit ylöspäin, jotta näet lisää 150 sanaa. Normaalissa HTML-muodossa, joka työntää ylimääräisen tekstin laatikon ulkopuolelle.

HTML-vierityksen tekeminen on melko helppoa. Sinun tarvitsee vain asettaa leveys ja korkeus vieritettävän elementin ja käytä sitten CSS overflow property määrittääksesi kuinka haluat vierityksen tapahtuvan

Mitä tehdä ylimääräisellä tekstillä?

Kun sinulla on enemmän tekstiä kuin mahtuu asettelun tilaan, sinulla on muutama vaihtoehto:

• Kirjoita teksti niin, että se on lyhyempi ja sopiva.
• Anna tekstin virrata rajojen yli ja toivon, että asettelu voi taipua tukemaan sitä.
• Leikkaa teksti siitä, missä se ylittää.
• Lisää vierityspalkkeja (yleensä pystysuora tekstille) niin, että välilyönti vierittää näyttääksesi ylimääräisen tekstin.

Paras vaihtoehto on tyypillisesti viimeinen vaihtoehto: luo vierivä tekstiruutu. Sitten ylimääräinen teksti voidaan silti lukea, mutta suunnittelusi ei vaarannu.

HTML ja CSS tälle ovat:

tekstaa tähän... 

ylivuoto: auto; käskee selainta lisäämään vierityspalkkeja, jos niitä tarvitaan, jotta teksti ei ylitä div: n rajoja. Mutta jotta tämä toimisi, tarvitset myös div: lle asetetut leveys- ja korkeustyyliominaisuudet, jotta ylivuotoon on rajat.

Voit myös leikata tekstin muuttamalla ylivuotoa: auto; että ylivuoto piilotettu; Jos jätät ylivuoto-ominaisuuden pois, teksti leviää div: n rajojen yli.

Voit lisätä vierityspalkkeja muuhun kuin vain tekstiin

Jos sinulla on suuri kuva, jonka haluat näyttää pienemmässä tilassa, voit lisätä vierityspalkkeja sen ympärille samalla tavalla kuin tekstin kanssa.

Tässä esimerkissä 400x509-kuva on 300x300-kappaleen sisällä.

Taulukot voivat hyötyä vierityspalkkeista

Pitkät tietotaulukot voivat olla hyvin vaikea lukea hyvin nopeasti, mutta asettamalla ne rajoitetun kokoisen divin sisälle ja lisäämällä sitten ylivuoto-ominaisuuden voit luoda taulukoita, joissa on paljon tietoja, jotka eivät vie äärimmäistä tilaa sivu.

Helpoin tapa on aivan kuten kuvien ja tekstin kanssa, lisää vain div taulukon ympärille, aseta div: n leveys ja korkeus ja lisää ylivuoto-ominaisuus:

... 

Yksi asia, joka tapahtuu, kun teet tämän, on vaakasuora vierityspalkki, joka näkyy yleensä, koska selain olettaa, että vierityspalkkien kromi on päällekkäinen taulukon kanssa. On monia tapoja korjata tämä muuttamalla pöydän leveyttä ja muita. Mutta suosikkimme on yksinkertaisesti poistaa vaakasuora vieritys käytöstä CSS 3 -ominaisuudella ylivuoto-x

Lisää vain ylivuoto-x: piilotettu; kohtaan div, ja se poistaa vaakasuoran vierityspalkin. Testaa tämä, koska sisältöä saattaa kadota.

Firefox tukee TBODY-tunnisteiden käyttöä ylivuotoon

Yksi todella mukava ominaisuus Firefox-selaimessa on, että voit käyttää ylivuoto-ominaisuutta sisäisissä taulukotunnisteissa, 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 liian huono, mutta se on hieno ominaisuus, jos lukijasi käyttävät vain Firefoxia. Selaa tätä esimerkkiä Firefoxissa nähdäksesi, mitä tarkoitan.

... NimiPuhelinJennifer502-5366. 

...