CSS-tekstin sisennys ja välilyönti

Sisällysluettelo

Tekstivälit

Tässä luvussa opit seuraavista ominaisuuksista:

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

Tekstin sisennys

Ominaisuutta text-indent käytetään määrittämään tekstin ensimmäisen rivin sisennys:

Esimerkki

p {
  text-indent: 50px;
}

Kokeile itse →

<!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>

Kirjainväli

kirjainväli-ominaisuutta käytetään määrittämään tekstin merkkien välinen väli.

Seuraava esimerkki osoittaa, kuinka merkkiväliä lisätään tai vähennetään:

Esimerkki

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

Kokeile itse →

<!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>

Viivankorkeus

Ominaisuutta line-height käytetään rivivälin määrittämiseen:

Esimerkki

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

Kokeile itse →

<!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>

Sanavälit

word-spacing-ominaisuutta käytetään välilyönnin määrittämiseen tekstin sanat.

Seuraava esimerkki osoittaa, kuinka väliä voidaan lisätä tai vähentää sanat:

Esimerkki

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

Kokeile itse →

<!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>

Valkoinen avaruus

Ominaisuus white-space määrittää, kuinka elementin sisällä olevia välilyöntejä käsitellään.

Tämä esimerkki osoittaa, kuinka tekstin rivitys elementin sisällä poistetaan käytöstä:

Esimerkki

 p {
  white-space: nowrap;
}

Kokeile itse →

<!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>

CSS-tekstiväliominaisuudet

letter-spacing: Määrittää tekstin merkkien välisen tilan
line-height: Määrittää rivin korkeuden
text-indent: Määrittää tekstilohkon ensimmäisen rivin sisennyksen
white-space: Määrittää, kuinka elementin sisällä olevia välilyöntejä käsitellään
word-spacing: Määrittää sanojen välisen tilan tekstissä