Spațierea textului CSS
CSS are mai multe proprietăți pentru controlul spațierii textului.
În acest capitol vei învăța despre: text-indent, letter-spacing, line-height, word-spacing și white-space.
Indentarea textului CSS
Proprietatea text-indent setează indentarea primei linii dintr-un bloc de text.
Sfat: Sunt permise valori negative. O valoare negativă indentează prima linie spre stânga.
Exemplu
Prima linie a paragrafului este indentată cu 50px.
<style>, indentează prima linie a unui <p> cu 50px. Adaugă un paragraf cu câteva propoziții.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>The first line of this paragraph is indented by 50px. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>
Spațierea între litere CSS
Proprietatea letter-spacing setează spațiul dintre caracterele unui text.
Sfat: Sunt permise valori negative.
Exemplu
Un titlu are o spațiere mai mare între litere, iar celălalt are una mai mică.
<style>, dă lui <h1> letter-spacing de 5px și lui <h2> letter-spacing de -2px. Adaugă un titlu de fiecare nivel.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}
</style>
</head>
<body>
<h1>Wider letter spacing</h1>
<h2>Tighter letter spacing</h2>
</body>
</html>
Înălțimea liniei CSS
Proprietatea line-height setează spațiul dintre linii.
Notă: Valorile negative nu sunt permise.
Exemplu
Un paragraf are o înălțime mică a liniei, iar celălalt una mare.
<style>, creează o clasă de paragraf cu line-height 0.8 (strâns) și una cu line-height 1.8 (relaxat). Dă fiecărui paragraf mai multe linii de text, astfel încât diferența de spațiere să fie vizibilă.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<p class="small">This paragraph has a small line height.<br>The lines are close together.<br>Lorem ipsum dolor sit amet.</p>
<p class="big">This paragraph has a big line height.<br>The lines are far apart.<br>Lorem ipsum dolor sit amet.</p>
</body>
</html>
Spațierea între cuvinte CSS
Proprietatea word-spacing setează spațiul dintre cuvintele unui text.
Sfat: Sunt permise valori negative.
Exemplu
Un paragraf are o spațiere mai mare între cuvinte, iar celălalt una mai mică.
<style>, creează o clasă de paragraf cu word-spacing 10px (mai mare) și una cu word-spacing -2px (mai mică). Adaugă un paragraf de text pentru fiecare.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}
</style>
</head>
<body>
<p class="one">This paragraph has wider spacing between words.</p>
<p class="two">This paragraph has tighter spacing between words.</p>
</body>
</html>
Spațiul alb CSS
Proprietatea white-space setează modul în care este tratat spațiul alb din interiorul unui element. Poate avea aceste valori: normal, nowrap, pre, pre-line și pre-wrap.
Exemplu
Cu nowrap, textul rămâne pe o singură linie în loc să se întindă.
<style>, setează un <p> la white-space: nowrap, astfel încât textul să rămână pe o singură linie în loc să se întindă. Adaugă un paragraf lung de text.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<p>This text will not wrap to a new line. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>
Proprietățile CSS de spațiere a textului
Un rezumat al proprietăților de spațiere:
letter-spacing— setează spațiul dintre caractere.line-height— setează înălțimea liniei.text-indent— setează indentarea primei linii.white-space— setează modul în care este tratat spațiul alb dintr-un element.word-spacing— setează spațiul dintre cuvinte.