Loo kasti keritav tekst, kasutades CSS-i ja HTML-vormingut
HTML- kerimisnupp on kast, mis lisab kerimisriba paremal ja alumises osas, kui karbi sisu on karbi mõõtmetega võrreldes suurem. Teisisõnu, kui sul on kasti, mis mahub umbes 50 sõna ja mille teksti tekst on 200 sõna, siis HTML-kerimisnupp paneb kerimisribad üles, et saaksite näha veel 150 sõna. Tavalises HTML-is, mis lihtsalt lükkaks lisa teksti väljapoole kasti.
HTML-i kerimine on üsna lihtne. Lihtsalt peate määrama selle elemendi laiuse ja kõrguse, mida soovite kerida, ja seejärel kasutage CSS-i ülevooluomadust, et määrata, kuidas soovite kerimisviisi esineda.
Mida teha ekstra tekstiga?
Kui teil on oma kujunduses rohkem teksti kui see sobib, on teil mõned võimalused:
- Teksti uuesti kirjutada nii, et see oleks lühem ja sobiks.
- Lubage tekst väljuda piiridest ja loodan, et paigutus saab seda toetada.
- Katkesta tekst, kus see ületab.
- Lisage kerimisriba (tavaliselt teksti jaoks vertikaalne), nii et ruum kerib, et näidata lisatut teksti.
Parim variant on tavaliselt viimane võimalus: luua kerimisriistakast. Siis saab lisateksti lugeda, kuid teie disain ei ole ohus.
Selle jaoks on HTML ja CSS järgmised:
Ülevool: auto; ütleb brauserile, et lisada kerimisribasid, kui need on vajalikud, et tekst ületaks divi piire. Kuid selleks, et see saaks töötada, vajavad divi ka laiuse ja kõrguse stiili omadused, nii et ülekate on piirides.
Teksti saab ka lõigata üleliigse muutmisega: auto; ülevoolu: peidetud; Kui jätate ületäituvust välja, siis tekst ületab divi piirid.
Saate lisada kerimisribasid rohkem kui lihtsalt teksti
Kui teil on suur pilt, mida soovite kuvada väiksemas ruumis, saate selle ümber kerimisriba lisada samamoodi nagu teksti puhul.
Selles näites on 400x509 kujutis 300x300 lõigu sees.
Tabelid saavad kasu kerimisribast
Pikad teabetabelid on väga raske lugeda väga kiiresti, kuid paigutades need piiratud suurusega alla ja seejärel lisades üleliigne vara, võite luua tabeleid, millel on palju andmeid, mis ei leia teie lehel äärmist ruumi .
Lihtsaim viis on nagu piltide ja teksti jaoks, lihtsalt lisage tabeli ümber div, määra selle divi laius ja kõrgus ning lisage üleliigne omadus:
| Name | Phone | ||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... Üks asi, mis juhtub siis, kui seda teete, on tavaliselt horisontaalne kerimisriba, sest brauser eeldab, et kerimisribad kroom kattuvad tabelis. Lahenduse muutmiseks tabeli laiust ja teisi on palju võimalusi. Kuid minu lemmik on lihtsalt horisontaalse kerimise väljalülitamine CSS-i 3 omandi ülevooluga-x. Lihtsalt lisage ülevoolu-x: peidetud; et div ja see eemaldab horisontaalse kerimisriba. Kontrollige seda kindlasti, sest võib-olla sisu kaob. Firefox toetab TBODY-i märksõnade kasutamist üleliigseksÜks Firefoxi brauseri tõeline kena omadus on see, et saate kasutada ülelaadimisomadust sisemiste tabeli sildidena, näiteks tbody ja thead või tfoot. See tähendab, et saate määrata lahtri sisule kerimisribasid ja päises olevad lahtrid jäävad nende kohal kinni. See töötab ainult Firefoxis , mis on liiga halb, kuid see on tore funktsioon, kui teie lugejad kasutavad Firefoxi ainult. Sirvige seda näidet Firefoxis, et näha, mida ma mõtlen.
|