Εσοχή και διάστημα κειμένου CSS

Πίνακας περιεχομένων

Διάστιχο κειμένου

Σε αυτό το κεφάλαιο θα μάθετε για τις ακόλουθες ιδιότητες:

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

Εσοχή κειμένου

Η ιδιότητα text-indent χρησιμοποιείται για τον καθορισμό της εσοχής της πρώτης γραμμής ενός κειμένου:

Παράδειγμα

p {
  text-indent: 50px;
}

Δοκιμάστε το μόνοι σας →

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

Διάστιχο γραμμάτων

Η ιδιότητα διαστήματα γραμμάτων χρησιμοποιείται για τον καθορισμό του χώρου μεταξύ των χαρακτήρων σε ένα κείμενο.

Το ακόλουθο παράδειγμα δείχνει πώς να αυξήσετε ή να μειώσετε το διάστημα μεταξύ των χαρακτήρων:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Υψος γραμμής

Η ιδιότητα line-height χρησιμοποιείται για τον καθορισμό του χώρου μεταξύ των γραμμών:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Διάστιχο λέξεων

Η ιδιότητα word-space χρησιμοποιείται για τον καθορισμό του διαστήματος μεταξύ τις λέξεις σε ένα κείμενο.

Το ακόλουθο παράδειγμα δείχνει πώς να αυξήσετε ή να μειώσετε το διάστημα μεταξύ λόγια:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

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

Λευκός Χώρος

Η ιδιότητα white-space καθορίζει τον τρόπο χειρισμού του λευκού διαστήματος μέσα σε ένα στοιχείο.

Αυτό το παράδειγμα δείχνει πώς να απενεργοποιήσετε την αναδίπλωση κειμένου μέσα σε ένα στοιχείο:

Παράδειγμα

 p {
  white-space: nowrap;
}

Δοκιμάστε το μόνοι σας →

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

letter-spacing: Καθορίζει το διάστημα μεταξύ των χαρακτήρων σε ένα κείμενο
line-height: Καθορίζει το ύψος της γραμμής
text-indent: Καθορίζει την εσοχή της πρώτης γραμμής σε ένα μπλοκ κειμένου
white-space: Καθορίζει τον τρόπο χειρισμού του λευκού διαστήματος μέσα σε ένα στοιχείο
word-spacing: Καθορίζει το διάστημα μεταξύ των λέξεων σε ένα κείμενο