HTML Scroll Box

Búðu til reit með fletta texta með CSS og HTML

HTML rúlla kassi er kassi sem bætir skrúfubrettum til hægri og neðst þegar innihald kassans er stærri en stærð kassans. Með öðrum orðum, ef þú ert með kassa sem passar um 50 orð, og þú hefur 200 texta texta, mun HTML skruntakki setja rennistikur upp til að láta þig sjá 150 önnur orð. Í venjulegu HTML sem myndi einfaldlega ýta auka textanum utan kassans.

Gerð HTML fletta er frekar auðvelt. Þú þarft bara að stilla breidd og hæð frumefnisins sem þú vilt fletta og nota síðan CSS flæðis eignina til að stilla hvernig þú vilt að fletta eigi sér stað.

Hvað á að gera með viðbótartexta?

Þegar þú hefur meiri texta en passar í plássið á útlitinu þínu, hefur þú nokkra möguleika:

Besti kosturinn er venjulega síðasta valkostur: Búðu til skrunaðan texta. Þá er enn hægt að lesa viðbótartexta en hönnunin er ekki í hættu.

HTML og CSS fyrir þetta væri:

texti hér ....

Flæðið: sjálfvirkt; Segir vafranum að bæta við skrúfubörlum ef þær eru nauðsynlegar til að halda textanum frá barmafullum mörkum div. En til þess að þetta geti virkað, þarftu einnig eiginleika breiddar og hæðastigs sem settar eru á Div, þannig að mörkin séu að flæða.

Einnig er hægt að skera á textann með því að breyta flæði: sjálfvirkt; að flæða: falinn ;. Ef þú sleppir útstreymis eigninni mun textinn leka yfir mörkum div.

Þú getur bætt við rúllaveitum til meira en bara texta

Ef þú ert með stór mynd sem þú vilt birta á minni plássi, getur þú bætt við skrúfustöngum í kringum hana á sama hátt og þú vilt með texta.

< / p>

Í þessu dæmi er 400x509 myndin inni í 300x300 málsgrein.

Töflur geta notið góðs af rúlla

Langar töflur af upplýsingum geta orðið mjög erfiðar að lesa mjög fljótt en með því að setja þau inn í div af takmarkaðri stærð og síðan bæta við flæðis eigninni geturðu búið til töflur með fullt af gögnum sem ekki taka upp mikla pláss á síðunni þinni .

Auðveldasta leiðin er eins og með myndum og texta, bæta bara við div um borðið, stilltu breidd og hæð þess div og bættu við flæða eigninni:

Nafn Sími 502-5366 ....

Eitt sem gerist þegar þú gerir þetta er lárétt flettistika birtist venjulega vegna þess að vafrinn gerir ráð fyrir að króm skrunahlaupanna skarast á borðið. Það eru margar leiðir til að laga þetta frá því að breyta borði og öðrum. En uppáhalds minn er að einfaldlega slökkva á lárétta hreyfingu með CSS 3 eign flæða-x. Bættu bara við flæði-x: falinn; til Div, og það mun fjarlægja lárétta skrúfu bar. Vertu viss um að prófa þetta, þar sem það gæti verið efni sem hverfur.

Firefox styður með því að nota TBODY merkin fyrir yfirflæði

Eitt mjög gott eiginleiki í Firefox vafranum er að þú getur notað flæða eignina á innri borðum eins og tbody og thead eða tfoot. Þetta þýðir að þú getur stillt skrúfubara á borðinu innihaldinu og hausfrumurnar festast yfir þeim. Þetta virkar aðeins í Firefox , sem er svo slæmt, en það er ágætur eiginleiki ef lesendur þínir nota aðeins Firefox. Skoðaðu þetta dæmi í Firefox til að sjá hvað ég meina.

Nafn Sími
Jennifer 502-5366 ...