Skep 'n boks met blaaiende teks met behulp van CSS en HTML
'N HTML- skuifkassie is 'n boks wat blaaiers aan die regterkant en onder voeg wanneer die inhoud van die boks groter is as die afmetings van die vak. Met ander woorde, as jy 'n boks het wat ongeveer 50 woorde pas, en jy het 'n teks van 200 woorde, sal 'n HTML-skuifkassie blaaivelle plaas sodat jy die bykomende 150 woorde kan sien. In standaard HTML wat net die ekstra teks buite die boks sou druk.
Die maak van HTML-blaai is redelik maklik. Jy moet net die breedte en hoogte van die element wat jy wil blaai, stel en gebruik dan die CSS- oorloop-eienskap om te bepaal hoe jy wil hê dat die blaai moet plaasvind.
Wat om te doen met ekstra teks?
As jy meer teks het as wat in die spasie op jou uitleg pas, het jy 'n paar opsies:
- Herskryf die teks sodat dit korter is en sal pas.
- Laat die teks oor die grense vloei en hoop die uitleg kan buig om dit te ondersteun.
- Knip die teks af waar dit oorloop.
- Voeg skuifblaaie (gewoonlik vertikaal vir teks) sodat die spasie blaai om die ekstra teks te wys.
Die beste opsie is tipies die laaste opsie: maak 'n blaaierkassie. Dan kan ekstra teks nog gelees word, maar jou ontwerp word nie gekompromitteer nie.
HTML en CSS hiervoor sal wees:
Die oorloop: motor; vertel die blaaier om blaaiers te voeg as dit nodig is om die teks van die grense van die div te oorskry. Maar om dit te laat werk, benodig jy ook die breedte- en hoogtestyl-eienskappe wat op die div gestel word, sodat daar grense is om te oorloop.
U kan ook die teks afsny deur oorloop te verander: outomaties; oorstroom: verborge ;. As u die oorloop-eiendom uitlaat, sal die teks oor die grense van die div spoel.
Jy kan rolstroke by meer as net teks voeg
As jy 'n groot prentjie het wat jy in 'n kleiner ruimte wil vertoon, kan jy die skuifblaaie rondom dit op dieselfde manier as met teks plaas.
In hierdie voorbeeld is die 400x509 beeld binne 'n 300x300 paragraaf.
Tabelle kan voordeel trek uit rolbalke
Lang inligtingstabelle kan baie moeilik wees om baie vinnig te lees, maar deur hulle binne 'n div van beperkte grootte te plaas en dan die oorloop eiendom by te voeg, kan jy tafels genereer met baie data wat nie uiterste spasie op jou bladsy opneem nie. .
Die maklikste manier is net soos met beelde en teks, voeg net 'n div om die tafel, stel die breedte en hoogte van daardie div in en voeg die oorloop-eienskap by:
| Name | Phone | ||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... Een ding wat gebeur wanneer jy dit doen, is 'n horisontale skuifbalk, gewoonlik omdat die blaaier aanneem dat die chroom van die skuifbalk die tabel oorvleuel. Daar is baie maniere om dit reg te stel om die wydte van die tafel en ander te verander. Maar my gunsteling is om eenvoudig horisontale blaai af te skakel met die CSS 3-eiendom oorloop-x. Voeg net oorloop-x by: verborge; na die div, en dit sal die horisontale skuifbalk verwyder. Maak seker dat jy dit toets, aangesien daar dalk inhoud is wat verdwyn. Firefox ondersteun die gebruik van die TBODY-etikette vir oorvloeiEen baie mooi kenmerk van die Firefox-blaaier is dat jy die oorloop-eiendom op innerlike tafeltags soos tbody and thead of tfoot kan gebruik. Dit beteken dat jy die skuifblaaie op die tafelinhoud kan stel, en die koperselle bly bokant hulle. Dit werk net in Firefox , wat is te sleg, maar dit is 'n lekker funksie as jou lesers net Firefox gebruik. Blaai na hierdie voorbeeld in Firefox om te sien wat ek bedoel.
|