Creați o casetă cu text derulant folosind CSS și HTML

Un HTML caseta de derulare este o casetă care adaugă bare de defilare în partea dreaptă și în partea de jos când conținutul casetei este mai mare decât dimensiunile casetei. Cu alte cuvinte, dacă aveți o casetă care poate încadra în jur de 50 de cuvinte și aveți un text de 200 de cuvinte, o casetă de defilare HTML va pune bare de defilare în sus pentru a vă permite să vedeți cele 150 de cuvinte suplimentare. În HTML standard, care ar împinge pur și simplu textul suplimentar în afara casetei.

Efectuarea defilării HTML este destul de ușor. Trebuie doar să setați lățimea și înălţime a elementului pe care doriți să îl derulați și apoi utilizați CSS proprietate overflow pentru a seta modul în care doriți să apară derularea.

Ce să faci cu text suplimentar?

Când aveți mai mult text decât se va potrivi în spațiul de pe aspectul dvs., aveți câteva opțiuni:

• Rescrieți textul astfel încât să fie mai scurt și să se potrivească.
• Permiteți textului să curgă dincolo de limite și sperați că aspectul se poate flexiona pentru a-l susține.
instagram viewer
• Tăiați textul acolo unde se revarsă.
• Adăugați bare de defilare (de obicei verticale 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 cu defilare. Apoi, textul suplimentar poate fi citit în continuare, dar designul dvs. nu este compromis.

HTML și CSS pentru aceasta ar fi:

text aici... 

overflow: auto; spune browserului să adauge bare de defilare dacă sunt necesare pentru a împiedica textul să depășească limitele div. Dar pentru ca acest lucru să funcționeze, aveți nevoie și de proprietățile stilului de lățime și înălțime setate pe div, astfel încât să existe limite care să depășească.

De asemenea, puteți tăia textul modificând overflow: auto; la overflow: ascuns; Dacă nu lăsați proprietatea de revărsare, textul se va revărsa peste limitele div.

Puteți adăuga bare 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 ei în același mod ca și textul.

În acest exemplu, imaginea 400x509 se află într-un paragraf 300x300.

Tabelele pot beneficia de bare de derulare

Tabelele lungi de informații pot deveni foarte dificil de citit foarte repede, dar plasându-le într-un div de dimensiuni limitate și apoi adăugând proprietatea de revărsare, puteți genera tabele cu o mulțime de date care nu ocupă spațiu extrem pe dvs. pagină.

Cea mai ușoară cale este la fel ca în cazul imaginilor și textului, doar adăugați un div în jurul mesei, setați lățimea și înălțimea divului respectiv și adăugați proprietatea de revărsare:

... 

Un lucru care se întâmplă atunci când faceți acest lucru este o bară de defilare orizontală care apare de obicei, deoarece browserul presupune că cromul barelor de defilare se suprapune peste masă. Există multe modalități de a remedia această problemă de la schimbarea lățimii mesei și a altora. Dar preferatul nostru este să oprim pur și simplu derularea orizontală cu proprietatea CSS 3 overflow-x

Doar adauga overflow-x: ascuns; la div, iar asta va elimina bara de defilare orizontală. Asigurați-vă că testați acest lucru, deoarece ar putea exista conținut care dispare.

Firefox acceptă utilizarea etichetelor TBODY pentru depășire

O caracteristică foarte frumoasă a browserului Firefox este că puteți utiliza proprietatea overflow pe etichetele de masă interioare, cum ar fi tbody și thead sau tfoot. Aceasta înseamnă că puteți seta bare de defilare pe conținutul tabelului, iar celulele antetului rămân ancorate deasupra lor. Acest lucru funcționează numai în Firefox, ceea ce este prea rău, dar este o caracteristică frumoasă dacă cititorii dvs. folosesc doar Firefox. Accesați acest exemplu din Firefox pentru a vedea la ce mă refer.

... NumeTelefonJennifer502-5366. 

...