Izveidojiet lodziņu ar ritināmu tekstu, izmantojot CSS un HTML

An HTML ritināšanas lodziņš ir lodziņš, kas pievieno ritjoslas labajā pusē un apakšā, ja lodziņa saturs ir lielāks par lodziņa izmēriem. Citiem vārdiem sakot, ja jums ir lodziņš, kurā var ievietot ap 50 vārdiem, un jums ir 200 vārdu teksts, HTML ritināšanas lodziņā tiks parādīti ritjoslas uz augšu, lai jūs varētu redzēt papildu 150 vārdus. Standarta HTML, kas vienkārši izspiež papildu tekstu ārpus lodziņa.

HTML ritināšana ir diezgan vienkārša. Jums vienkārši jāiestata platums un augstums no elementa, kuru vēlaties ritināt, un pēc tam izmantojiet CSS pārpildes rekvizīts, lai iestatītu ritināšanas darbību.

Ko darīt ar papildu tekstu?

Ja jums ir vairāk teksta, nekā būs paredzēts izkārtojuma vietā, jums ir dažas iespējas:

• Pārrakstiet tekstu tā, lai tas būtu īsāks un derētu.
• Ļaujiet tekstam plūst pāri robežām un ceru, ka izkārtojums var elastīgi to atbalstīt.
• Nogrieziet tekstu vietā, kur tas pārplūst.
• Pievienojiet ritjoslas (parasti teksta vertikālās), lai atstarpe ritinātu, lai parādītu papildu tekstu.

Labākais variants parasti ir pēdējā iespēja: izveidojiet ritinošu tekstlodziņu. Tad papildu tekstu joprojām var izlasīt, taču jūsu dizains netiek apdraudēts.

HTML un CSS tam būtu:

teksts šeit... 

The pārplūde: auto; liek pārlūkprogrammai pievienot ritjoslas, ja tās ir nepieciešamas, lai teksts nepārsniegtu div robežas. Bet, lai tas darbotos, ir nepieciešamas arī divā iestatītās platuma un augstuma stila īpašības, lai būtu pārpildes robežas.

Varat arī nogriezt tekstu, mainot pārpildi: auto; uz pārplūde: slēpta; Ja atstājat pārpildes rekvizītu, teksts izpletīsies pāri div robežas.

Ritjoslas var pievienot ne tikai tekstam

Ja jums ir liels attēls, kuru vēlaties parādīt mazākā vietā, ap to varat pievienot ritjoslas tāpat kā ar tekstu.

Šajā piemērā 400x509 attēls atrodas 300x300 rindkopā.

Galdi var izmantot ritināšanas joslas

Garas informācijas tabulas var būt ļoti grūti lasāmas ļoti ātri, bet, ievietojot tās ierobežota lieluma divā un pēc tam pievienojot pārpildes rekvizītu, varat ģenerēt tabulas ar lielu datu daudzumu, kas jūsu vietā neaizņem ārkārtīgi daudz vietas lappuse.

Vieglākais veids ir tāpat kā ar attēliem un tekstu, vienkārši pievienojiet div ap tabulu, iestatiet šī div platumu un augstumu un pievienojiet pārpildes rekvizītu:

... 

Viena lieta, kas notiek, to darot, ir horizontāla ritināšanas josla, parasti parādās tāpēc, ka pārlūks pieņem, ka ritjoslu hroms pārklājas ar tabulu. Ir daudz veidu, kā to novērst, mainot galda platumu un citus. Bet mūsu iecienītākais ir vienkārši izslēgt horizontālo ritināšanu ar CSS 3 īpašumu pārplūde-x

Vienkārši pievienojiet pārplūde-x: slēpta; uz div, un tas noņems horizontālo ritjoslu. Noteikti pārbaudiet to, jo, iespējams, pazūd saturs.

Firefox atbalsta TBODY tagu izmantošanu pārpildei

Viena patiešām jauka Firefox pārlūka iezīme ir tā, ka jūs varat izmantot pārpildes rekvizītu iekšējos galda tagos, piemēram, tbody un thead vai tfoot. Tas nozīmē, ka tabulas saturā varat iestatīt ritjoslas, un virs tām šūnas paliek noenkurotas virs tām. Tas darbojas tikai Firefox, kas ir pārāk slikti, taču tā ir jauka funkcija, ja lasītāji izmanto tikai Firefox. Pārlūkojiet šo Firefox piemēru, lai redzētu, ko es domāju.

... VārdsPhoneJennifer502-5366. 

...