CSS szöveg behúzás és térköz

Tartalomjegyzék

Szövegköz

Ebben a fejezetben a következő tulajdonságokat ismerheti meg:

text-indent
letter-spacing
line-height
word-spacing
white-space

Szöveg behúzása

A text-indent tulajdonság a szöveg első sorának behúzásának meghatározására szolgál:

Példa

p {
  text-indent: 50px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-indent: 50px;
}
</style>
</head>
<body>

<h1>Using text-indent</h1>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>

Betűtávolságok

A betűköz tulajdonság a karakterek közötti szóköz megadására szolgál a szövegben.

A következő példa bemutatja, hogyan lehet növelni vagy csökkenteni a karakterek közötti távolságot:

Példa

h1 {
  letter-spacing: 5px;
}
h2 {
  letter-spacing: -2px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
  letter-spacing: 5px;
}

h3 {
  letter-spacing: -2px;
}
</style>
</head>
<body>

<h1>Using letter-spacing</h1>

<h2>This is heading 1</h2>
<h3>This is heading 2</h3>

</body>
</html>

Vonalmagasság

A line-height tulajdonság a sorok közötti térköz megadására szolgál:

Példa

p.small {
  line-height: 0.8;
}
p.big {
  
line-height: 1.8;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p.small {
  line-height: 0.7;
}

p.big {
  line-height: 1.8;
}
</style>
</head>
<body>

<h1>Using line-height</h1>

<p>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>

<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

</body>
</html>

Szóköz

A word-spacing tulajdonság a közötti szóköz megadására szolgál a szavak egy szövegben.

A következő példa bemutatja, hogyan lehet növelni vagy csökkenteni a távolságot szavak:

Példa

 p.one {
  word-spacing: 10px;
}
p.two {
  word-spacing: -2px;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}
</style>
</head>
<body>

<h1>Using word-spacing</h1>

<p>This is a paragraph with normal word spacing.</p>

<p class="one">This is a paragraph with larger word spacing.</p>

<p class="two">This is a paragraph with smaller word spacing.</p>

</body>
</html>

Fehér űr

A white-space tulajdonság határozza meg, hogyan kell kezelni az elemen belüli szóközöket.

Ez a példa bemutatja, hogyan lehet letiltani a szöveg tördelését egy elemen belül:

Példa

 p {
  white-space: nowrap;
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap;
}
</style>
</head>
<body>

<h1>Using white-space</h1>

<p>
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
</p>

<p>Try to remove the white-space property to see the difference!</p>

</body>
</html>

A CSS-szövegközök tulajdonságai

letter-spacing: Meghatározza a karakterek közötti szóközt a szövegben
line-height: Megadja a vonal magasságát
text-indent: Megadja a szövegblokk első sorának behúzását
white-space: Meghatározza, hogyan kell kezelni a szóközöket egy elemen belül
word-spacing: Meghatározza a szóközt a szövegben