Krei skatolon kun movo de teksto per CSS kaj HTML
Skatolo-skatolo de HTML estas skatolo, kiu aldonas rulumajn barojn dekstre kaj malsupre kiam la enhavo de la skatolo estas pli granda ol la skatolo-dimensioj. Alivorte, se vi havas skatolon, kiu povas persvadi ĉirkaŭ 50 vortojn, kaj vi havas tekston de 200 vortoj, HTML-rula skatolo metos rulumajn barojn por permesi al vi vidi la pliajn 150 vortojn. En norma HTML, kiu simple pelus la ekstra teksto ekstere de la skatolo.
Faranta HTMLan rulumon estas sufiĉe facila. Vi nur bezonas agordi la larĝecon kaj altecon de la elemento, kiun vi volas rulumi kaj poste uzi la CSS- superfluan posedaĵon por agordi kiel vi volas, ke la movado okazas.
Kion fari kun Ekstra Teksto?
Kiam vi havas pli da teksto ol en la spaco en via aranĝo, vi havas kelkajn eblojn:
- Reescribu la tekston por ke ĝi estu pli mallonga kaj persvadas.
- Permesu, ke la teksto fluas preter la limoj kaj esperas, ke la aranĝo povas fleksi por subteni ĝin.
- Malŝaltu la tekston, kie ĝi superfluas.
- Aldonu rulumajn stangojn (kutime vertikala por teksto) por ke la spacaj movoj montru la ekstra teksto.
La plej bona eblo estas tipe la lasta opcio: krei movan tekston. Tiam ekstra teksto ankoraŭ povas esti legita, sed via dezajno ne kompromitas.
HTML kaj CSS por tio estus:
La superfluo: aŭtomata; diras al la retumilo aldoni rulumajn stangojn se ili bezonas teni la tekston de superfluanta la limojn de la div. Sed por ke ĉi tio funkciu, vi ankaŭ bezonas la larĝajn kaj altecajn stilojn poseditajn sur la div, tiel ke limoj estas superfluaj.
Vi povas ankaŭ tranĉi la tekston ŝanĝante superfluon: aŭtomata; superflui: kaŝita; Se vi forlasos la superfluan posedaĵon, la teksto verŝos la limojn de la div.
Vi povas aldoni Scroll Bars al Pli ol Just Teksto
Se vi havas grandan bildon, kiun vi deziras montri en pli malgranda spaco, vi povas aldoni rulumajn barojn ĉirkaŭe laŭ la sama maniero, kiel vi volas per teksto.
En ĉi tiu ekzemplo, la 400x509 bildo estas ene de 300x300 alineo.
Tabloj Povas Utiligi de Scroll Bars
Longaj tabeloj da informoj povas tre malfacile legi tre rapide, sed metante ilin ene de div de limigita grandeco kaj aldonante la superfluan posedaĵon, vi povas generi tablojn kun multaj datumoj, kiuj ne konsumas ekstreme spacon en via paĝo. .
La plej facila maniero similas kun bildoj kaj teksto, nur aldonu div ĉirkaŭ la tablo, metu la larĝon kaj altecon de tiu div, kaj aldonu la superfluan posedaĵon:
| Name | Phone | ||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... Unu afero, kiu okazas, kiam vi faras ĉi tion, estas horizontala veturilo, kiu kutime aperas, ĉar la retumilo supozas, ke la kropo de la rulumaj stangoj superas la tablon. Estas multaj manieroj ripari ĉi tion de ŝanĝi la larĝon de la tablo kaj aliaj. Sed mia plej ŝatata estas simple malŝalti horizontalan movadon kun la CSS 3-posedaĵo superflua-x. Nur aldonu superflua-x: kaŝitan; al la div, kaj tio forigos la horizontalan stangon. Nepre provu ĉi tion, ĉar eble ekzistas enhavo, kiu malaperas. Firefox Elportas Uzanta la TBODI Etikedoj por SuperfluoUnu vere bela trajto de la retumilo de Firefox estas, ke vi povas uzi la superfluan posedaĵon en internaj tabloj-etikedoj kiel tbody and aad or tfoot. Ĉi tio signifas, ke vi povas agordi rulumajn barojn sur la tablo enhavojn, kaj la kapliniaj ĉeloj restas ankrumitaj super ili. Ĉi tio nur funkcias en Firefox , kio estas tro malbona, sed ĝi estas bela trajto se viaj legantoj nur uzas Firefox. Foliumu al ĉi tiu ekzemplo en Firefox por vidi kion mi volas diri.
|