CSS-i ja HTML-i abil saate luua keritava tekstiga kasti

An HTML kerimisboks on kast, mis lisab kerimisribasid paremale ja allapoole, kui kasti sisu on kasti mõõtmetest suurem. Teisisõnu, kui teil on kast, kuhu mahub umbes 50 sõna ja teil on 200-sõnaline tekst, asetab HTML-i kerimisboks kerimisribad üles, et saaksite näha täiendavaid 150 sõna. Tavalises HTML-is, mis suruks lisateksti lihtsalt kastist välja.

HTML-i kerimine on üsna lihtne. Peate lihtsalt määrama laiuse ja kõrgus elementi, mida soovite kerida, ja seejärel kasutage nuppu CSS overflow atribuut, et määrata, kuidas soovite kerimist toimida.

Mida teha lisatekstiga?

Kui teil on rohkem teksti, kui mahub teie paigutuse ruumi, on teil mõned võimalused:

• Kirjutage tekst ümber nii, et see oleks lühem ja sobiks.
• Laske tekstil üle piiride voolata ja loodame, et paigutus saab seda toetada.
• Lõigake tekst ära kohast, kus see üle voolab.
• Lisage kerimisribasid (tavaliselt teksti jaoks vertikaalsed), nii et tühik keriks ekstra teksti kuvamiseks.

Parim variant on tavaliselt viimane võimalus: looge keritav tekstikast. Siis saab lisateksti ikkagi lugeda, kuid teie kujundus pole ohus.

HTML ja CSS selle jaoks oleksid:

kirjuta siia... 

The ülevool: auto; käsib brauseril lisada kerimisribasid, kui neid on vaja selleks, et tekst ei ületaks divi piire. Kuid selleks, et see toimiks, vajate ka div-is seatud laiuse ja kõrguse stiili omadusi, nii et ülevooluks oleksid piirid.

Samuti saate teksti ära lõigata, muutes ülevoolu: auto; kuni ülevool: varjatud; Kui jätate ülevoolava omaduse välja, levib tekst üle div piiride.

Saate kerimisribasid lisada mitte ainult tekstile

Kui teil on suur pilt, mida soovite kuvada väiksemas ruumis, saate selle ümber lisada kerimisribad samamoodi nagu tekstiga.

Selles näites on pilt 400x509 300x300 lõigu sees.

Tabelid saavad kerimisribadest kasu

Pikki teabetabeleid on väga raske kiiresti lugeda, kuid pannes need piiratud suurusega div-i sisse ja seejärel lisades ülevoolu atribuudi, saate luua palju andmeid sisaldavaid tabeleid, mis ei võta teie arvutis üliruumi lehele.

Lihtsaim viis on nagu piltide ja teksti puhul, lisage lihtsalt tabeli ümber div, määrake selle div laius ja kõrgus ning lisage ülevoolu omadus:

... 

Üks asi, mis seda juhtub, on tavaliselt horisontaalne kerimisriba, kuna brauser eeldab, et kerimisribade kroom kattub tabeliga. Selle parandamiseks on palju võimalusi, muutes tabeli laiust ja teisi. Kuid meie lemmik on horisontaalne kerimine CSS 3 atribuudiga lihtsalt välja lülitada ülevool-x

Lihtsalt lisage ülevool-x: peidetud; div-le ja see eemaldab horisontaalse kerimisriba. Proovige seda kindlasti, kuna sisu võib kaduda.

Firefox toetab TBODY siltide kasutamist ülevooluks

Üks Firefoxi brauseri tõeliselt kena omadus on see, et saate ülevoolu omadust kasutada sisemistel laua siltidel nagu tbody ja thead või tfoot. See tähendab, et saate tabeli sisule seada kerimisribad ja päise lahtrid jäävad nende kohale ankrusse. See töötab ainult Firefoxis, mis on liiga halb, kuid see on tore funktsioon, kui teie lugejad kasutavad ainult Firefoxi. Sirvige seda näidet Firefoxis, et näha, mida ma mõtlen.

... NimiPhoneJennifer502-5366. 

...