text CSS3 Include proprietățile textului pentru a ajuta la rezolvarea problemelor legate de împachetarea textului și tăierea textului în conținut.
Proprietăți CSS3 pentru formatarea textului
1. Decuparea liniei text-overflow
Proprietatea vă permite să limitați lungimea textului atunci când acesta nu se potrivește în container, tăindu-l vizual sau afișându-l cu elipse. Proprietatea funcționează numai dacă sunt specificate următoarele condiții: trebuie definită lățimea containerului, elementul trebuie să aibă valorile overflow: hidden și white-space: nowrap . Nu moștenit.
Sintaxă
P (lățime: 300 px; overflow: ascuns; spațiu alb: nowrap; text-overflow: elipse; ) Fig. 1. Decupați textul utilizând proprietatea text-overflow
2. Separarea cu silabe în cadrul cuvintelor
Într-o situație normală, cuvintele sunt mutate pe o altă linie unde există spații sau cratime (" transfer moale"), sau în cazul transferului forțat folosind elementul
. Această proprietate vă permite să setați reguli de separare în silabe în cuvinte, astfel încât liniile lungi să umple complet spațiul din interiorul containerului. Nu este utilizat pentru limbile CJK (chineză-japoneză-coreeană). Mostenit.
Sintaxă
P (despărțire de cuvânt: normal;) p (despărțire de cuvânt: ruptură-toate;) p (despărțire de cuvânt: păstrare-toate;)
3. Înfășurați cuvintele în linia de înfășurare a cuvintelor
Este folosit în cazurile în care textul nu se încadrează în containerul său și depășește granița acestuia. Să rup cuvinte lungiși transferați-le la rândul următor. Mostenit. Functioneaza doar daca valoare de spațiu alb permite întreruperi de linie.
Proprietatea spațiu alb specifică modul de afișare a spațiilor dintre cuvinte. În circumstanțe normale, orice număr de spații din codul HTML apar ca unul singur pe o pagină web. Excepția este elementul
, textul plasat în acest container este scos cu toate spațiile, așa cum a fost formatat de utilizator. Deci, spațiul alb simulează muncaDar, spre deosebire de acesta, nu schimbă fontul în monospace.informatie scurta
Denumiri
| Descriere | Exemplu | |
|---|---|---|
| <тип> | Indică tipul valorii. | <размер> |
| A && B | Valorile trebuie să fie afișate în ordinea specificată. | <размер> && <цвет> |
| A | B | Indică faptul că trebuie să selectați o singură valoare dintre cele propuse (A sau B). | normal | litere mici |
| A || B | Fiecare valoare poate fi folosită independent sau împreună cu altele în orice ordine. | lățime || numara |
| Grupează valori. | [ recolta || cruce ] | |
| * | Repetați de zero sau de mai multe ori. | [,<время>]* |
| + | Repetați una sau mai multe ori. | <число>+ |
| ? | Tipul, cuvântul sau grupul specificat este opțional. | medalion? |
| (A, B) | Repetați cel puțin A, dar nu mai mult de B ori. | <радиус>{1,4} |
| # | Repetați o dată sau de mai multe ori, separate prin virgule. | <время># |
Valori
normal Textul din fereastra browserului este afișat ca de obicei, rupturile de rând sunt setate automat. nowrap Spațiile sunt ignorate, rupturile de linie din codul HTML sunt ignorate, tot textul este afișat pe o singură linie; totodată, adăugând
împachetează textul la linie nouă. pre Text este afișat luând în considerare toate spațiile și cratimele așa cum au fost adăugate de dezvoltator în codul HTML. Dacă linia este prea lungă și nu se potrivește în fereastra browserului, atunci va fi adăugată dungă orizontală sul. pre-line Spațiile nu sunt luate în considerare în text, textul este mutat automat pe linia următoare dacă nu se încadrează în zona specificată. pre-wrap Toate spațiile și pauzele sunt păstrate în text, dar dacă lățimea liniei nu se încadrează în zona specificată, textul va fi înfășurat automat la următoarea linie.
Efectul valorilor asupra textului este prezentat în tabel. 1.
Exemplu
Exemplu
Ultima teoremă a lui Fermat
X n+ Y n= Z n
unde n este un număr întreg > 2
Rezultat acest exemplu prezentată în fig. 1.
Orez. 1. Aplicarea proprietății spațiu alb
Model obiect
Un obiect.stil.albSpaţiu
Notă
Browser Internet Explorer până la versiunea 7.0 inclusiv nu acceptă valorile pre-line și pre-wrap. Pentru