CSS3 text
CSS3 conține mai multe caracteristici noi de text.
În acest capitol veți învăța despre următoarele proprietăți de text:
-
text-overflow -
word-wrap -
word-break
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmate de -o- specifica prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 Text Overflow
CSS3 text-overflow proprietate specifică modul în care revărsată conținut care nu este afișat ar trebui să fie semnalată utilizatorului.
Poate fi tăiate:
Acesta este un text lung, care nu se va potrivi în caseta
sau poate fi redat ca o elipsă (...) :
Acesta este un text lung, care nu se va potrivi în caseta
Codul CSS este după cum urmează:
Exemplu
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
} Încearcă - l singur » Următorul exemplu arată cum puteți afișa conținutul revărsată atunci când situându-se peste elementul:
CSS3 Word Wrapping
CSS3 word-wrap proprietate permite cuvinte lungi să fie în măsură să fie rupte și înfășurați pe linia următoare.
Dacă un cuvânt este prea lung pentru a încăpea într-o zonă, se extinde în afara:
Acest paragraf conține un cuvânt foarte lung: thisisaveryveryveryveryveryverylongword . Cuvântul lung se va rupe si infasurati la linia următoare.
Proprietatea cuvânt-wrap vă permite să forțați să-și încheie textul - chiar dacă aceasta înseamnă divizare-l în mijlocul unui cuvânt:
Acest paragraf conține un cuvânt foarte lung: thisisaveryveryveryveryveryverylongword . Cuvântul lung se va rupe si infasurati la linia următoare.
Codul CSS este după cum urmează:
Exemplu
Se lasă cuvinte lungi să fie în măsură să fie rupte și înfășurați pe linia următoare:
p {
word-wrap: break-word;
}
Încearcă - l singur » CSS3 Word Breaking
CSS3 word-break proprietate specifică regulile de linie de rupere.
Acest paragraf conține un text. Această linie va-break-la-cratime.
Acest paragraf conține un text. Liniile se vor rupe în orice caracter.
Codul CSS este după cum urmează:
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 »
Proprietăți text CSS3
Tabelul de mai jos listează noile proprietăți de text CSS3:
| Proprietate | Descriere |
|---|---|
| text-align-last | Specifică modul în care să se alinieze ultima linie a unui text |
| text-emphasis | O prescurtare pentru stabilirea-accent-stilul de text și text-accent-culoare într-o singură declarație |
| text-justify | Specifică modul în care justificate de text ar trebui să fie aliniate și distanțate |
| text-overflow | Specifică modul în care conținutul revărsată care nu este afișată trebuie semnalată utilizatorului |
| word-break | Specifică regulile de rupere de linie pentru script-uri non-CJK |
| word-wrap | Permite cuvinte lungi să fie în măsură să fie rupt și înfășurați pe linia următoare |