Creați o casetă cu text derulant utilizând CSS și HTML
O casetă de scroll HTML este o cutie care adaugă bare de defilare în partea dreaptă și în partea inferioară când conținutul casetei este mai mare decât dimensiunile casetei. Cu alte cuvinte, dacă aveți o cutie care se potrivește în jur de 50 de cuvinte și aveți text de 200 de cuvinte, o casetă de parcurgere HTML va pune barele de derulare până când veți putea vedea cele 150 de cuvinte suplimentare. În standardul HTML care ar împinge simplu textul extra în afara casetei.
Efectuarea parcurgerii HTML este destul de ușoară. Trebuie doar să setați lățimea și înălțimea elementului pe care doriți să îl derulați și apoi să utilizați proprietatea de depășire CSS pentru a stabili cum doriți să apară defilarea.
Ce să faci cu text suplimentar?
Când aveți mai mult text decât se va potrivi în spațiul din aspectul dvs., aveți câteva opțiuni:
- Rescrie textul astfel încât să fie mai scurt și să se potrivească.
- Permiteți textului să curgă dincolo de granițe și sperăm că aspectul se poate flexa pentru ao susține.
- Tăiați textul în care se revarsă.
- Adăugați bare de defilare (de obicei, verticală pentru text) astfel încât spațiul să deruleze pentru a afișa textul suplimentar.
Cea mai bună opțiune este de obicei ultima opțiune: creați o casetă de text derulantă. Apoi, text suplimentar poate fi citit, dar design-ul dvs. nu este compromis.
HTML și CSS pentru aceasta ar fi:
Overflow: auto; spune browser-ului să adauge bare de defilare dacă acestea sunt necesare pentru ca textul să nu depășească limitele divului. Dar pentru ca aceasta să funcționeze, aveți nevoie și de proprietățile stilului lățimii și înălțimii setate pe div, astfel încât să existe limite de depășire.
De asemenea, puteți să decupați textul prin schimbarea debitului: automat; pentru a depăși: ascuns ;. Dacă renunți la proprietatea de depășire, textul se va vărsa peste limitele div.
Puteți adăuga barele de derulare la mai mult decât doar text
Dacă aveți o imagine mare pe care doriți să o afișați într-un spațiu mai mic, puteți adăuga bare de defilare în jurul acesteia în același mod pe care l-ați avea cu textul.
În acest exemplu, imaginea de 400x509 se află într-un paragraf de 300x300.
Tabelele pot beneficia de barele de derulare
Tabelele lungi de informații pot fi foarte greu de citit foarte repede, dar prin plasarea lor într-un div de o dimensiune limitată și apoi adăugarea proprietății de depășire, puteți genera tabele cu o mulțime de date care nu ocupă spațiu extrem de mare pe pagina dvs. .
Cea mai ușoară cale este ca și în cazul imaginilor și textului, adăugați o div în jurul mesei, setați lățimea și înălțimea divului și adăugați proprietatea de depășire:
Un lucru care se întâmplă atunci când faceți acest lucru este o bară orizontală de defilare apare, de obicei, deoarece browserul presupune că cromul barelor de defilare se suprapune peste masă. Există mai multe moduri de a rezolva această problemă de la modificarea lățimii tabelului și a altora. Dar preferatul meu este de a opri pur și simplu defilarea orizontală cu proprietatea CSS 3 overflow-x. Doar adăugați overflow-x: ascuns; la div, și care va elimina bara orizontală de defilare. Asigurați-vă că ați testat acest lucru, deoarece poate exista conținut care dispare.
Firefox acceptă utilizarea etichetelor TBODY pentru depășire
O caracteristică foarte plăcută a browserului Firefox este că puteți utiliza proprietatea de overflow pe tag-urile de masă interioară, cum ar fi tbody și thead sau tfoot. Aceasta înseamnă că puteți seta barele de defilare pe conținutul mesei, iar celulele antetului sunt ancorate deasupra lor. Acest lucru funcționează numai în Firefox , ceea ce este prea rău, dar este o caracteristică plăcută dacă cititorii dvs. folosesc numai Firefox. Căutați acest exemplu în Firefox pentru a vedea ce vreau să spun.