Izveidojiet lodziņu ar ritināšanas tekstu, izmantojot CSS un HTML
HTML ritināšanas lodziņš ir lodziņš, kas pievieno ritjoslas labajā un apakšējā daļā, ja lodziņa saturs ir lielāks par lodziņa izmēriem. Citiem vārdiem sakot, ja jums ir lodziņš, kas var saturēt apmēram 50 vārdus, un jums ir teksts ar 200 vārdiem, HTML ritināšanas lodziņš novieto ritjoslas augšup, lai jūs redzētu papildu 150 vārdus. Standarta HTML formātā, kas vienkārši aizpildītu papildu tekstu ārpus lodziņa.
Veicot HTML ritināšanu, ir diezgan viegli. Jums vienkārši jānoregulē tā elementa platums un augstums, kuru vēlaties ritināt, un pēc tam izmantojiet CSS pārpildes īpašību, lai iestatītu, kā vēlaties ritināšanu veikt.
Ko darīt ar ekstra tekstu?
Ja jums ir vairāk teksta nekā tas, kas ievietots jūsu izkārtojuma vietā, jums ir dažas iespējas:
- Pārrakstīt tekstu tā, lai tas būtu īsāks un piemērots.
- Ļaujiet tekstam plūstot ārpus robežām, un ceru, ka izkārtojums to varēs flex, lai to atbalstītu.
- Izgrieziet tekstu, kur tas pārplūst.
- Pievienojiet ritjoslas (parasti vertikāli tekstam), lai atstarpes ritinātu, lai parādītu papildu tekstu.
Vislabākais variants parasti ir pēdējā iespēja: izveidojiet ritināšanas teksta lodziņu. Tad papildu tekstu var lasīt, bet jūsu dizains nav apdraudēts.
HTML un CSS šim nolūkam būtu:
Pārplūde: auto; liek pārlūkam pievienot rullīšu joslas, ja tās ir nepieciešamas, lai teksts nepārsniegtu divas robežas. Bet, lai tas darbotos, diviem ir jānosaka arī platuma un augstuma stila rekvizīti, lai būtu robežas pārpildīšanai.
Varat arī pārtraukt tekstu, mainot pārpildījumu: auto; pārplūst: slēpta; Ja atstājat pārpildes īpašumu, teksts pārspēs divas robežas.
Jūs varat pievienot rullīšu joslas vairāk nekā tikai tekstu
Ja jums ir liels attēls, kuru vēlaties parādīt mazākā telpā, to var pievienot ritjoslas joslai tādā pašā veidā kā tekstu.
Šajā piemērā 400x509 attēls atrodas 300x300 rindkopā.
Tabulas var gūt labumu no ritināšanas stieņiem
Gari grūti lasāmie informācijas tabulas var izlasīt ļoti ātri, bet ievietojot tos ierobežotā izmērā un pēc tam pievienojot pārpildes īpašumu, jūs varat ģenerēt tabulas ar lielu daudzumu datu, kas neņem vērā ļoti lielu vietu jūsu lapā. .
Vienkāršākais veids ir tāpat kā ar attēliem un tekstu, vienkārši pievienojiet div ap tabulu, iestatiet šī diva platumu un augstumu un pievienojiet pārpildes īpašumu:
| Name | Phone | ||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... Viena lieta, kas notiek, kad jūs to darāt, parasti tiek parādīta horizontālā ritjosla, jo pārlūks pieņem, ka ritjoslu hroms pārklājas ar tabulu. Ir daudzi veidi, kā to novērst, mainot galda platumu un citus. Bet mans iecienītākais ir vienkārši izslēgt horizontālo ritināšanu, izmantojot CSS 3 īpašuma pārpildījumu-x. Vienkārši pievienojiet pārpildījumu-x: paslēpts; uz div, un tas noņems horizontālo ritjoslu. Noteikti pārbaudiet to, jo var būt saturs, kas pazūd. Firefox atbalsta TBODY tagu izmantošanu pārlādēšanaiViena patiešām jauka Firefox pārlūka iezīme ir tā, ka varat izmantot pārplūdes īpašumu iekšējā tabulas tagos, piemēram, tbody un thead vai tfoot. Tas nozīmē, ka jūs varat iestatīt ritināšanas lentes uz tabulas satura, un galvenes šūnas paliek noenkurotas virs tiem. Tas darbojas tikai pārlūkprogrammā Firefox , kas ir pārāk slikti, taču tā ir jauka funkcija, ja jūsu lasītāji izmanto tikai Firefox. Pārlūkojiet šo piemēru Firefox, lai redzētu, ko es domāju.
|