Perataan, Dekorasi, dan Jarak Teks
Ratakan teks, tambahkan garis bawah atau coretan, dan kontrol jarak huruf serta baris.
Perataan, Dekorasi, dan Jarak Teks adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
text-align
text-align mengendalikan perataan horizontal konten sebaris di dalam wadah blok.
<p class="left">Left aligned text</p>
<p class="center">Center aligned text</p>
<p class="right">Right aligned text</p>
<p class="justify">Justified text that stretches to fill the full width of its container on every line except the last, spreading word spacing evenly across the line.</p>
text-align: justify
justify merentangkan baris hingga memenuhi seluruh lebar wadah dengan menambahkan spasi antarkata. Gunakan bersama hyphens: auto untuk menghindari celah yang janggal pada wadah yang sempit.
<p>Justified paragraph text with hyphenation enabled so that long words like internationalization can break across justified lines cleanly without leaving large gaps.</p>
text-decoration
text-decoration menambahkan garis pada teks. Biasanya digunakan untuk menggarisbawahi tautan atau mencoret konten yang dihapus.
<a href="#">Underlined link</a>
<p class="strikethrough">Strikethrough text</p>
<a href="#" class="no-underline">No underline link</a>
Bentuk Panjang text-decoration
text-decoration adalah singkatan untuk garis, gaya, warna, dan ketebalan:
<a href="#">Wavy red underline link</a>
text-transform
text-transform mengubah kapitalisasi teks tanpa mengubah HTML yang mendasarinya:
<p class="upper">uppercase this text</p>
<p class="lower">LOWERCASE THIS TEXT</p>
<p class="title">title case this text</p>
<p class="none">No Transform Applied</p>
text-indent
text-indent memberi indentasi pada baris pertama elemen blok. Gunakan nilai negatif bersama padding yang sesuai untuk menyembunyikan teks secara aksesibel (penggantian gambar).
<p class="indent">This paragraph's first line is indented by 2em, a classic print-style paragraph convention brought to the web.</p>
<a href="#" class="logo-link">Company Logo</a>
white-space
white-space mengendalikan cara penanganan spasi kosong dan jeda baris dalam HTML sumber:
normal— gabungkan spasi kosong, lakukan pembungkusan pada katanowrap— cegah pembungkusan barispre— pertahankan spasi kosong, jangan lakukan pembungkusanpre-wrap— pertahankan spasi kosong, izinkan pembungkusan
<p class="nowrap">This text will not wrap no matter how long the line becomes.</p>
<pre>function example() {
return true;
}</pre>
letter-spacing
letter-spacing menetapkan spasi tambahan antarkarakter. Nilai positif merenggangkan glif; nilai negatif mendekatkannya. Gunakan em untuk penskalaan proporsional.
<p class="spaced">spaced heading text</p>
word-spacing
word-spacing menambahkan spasi tambahan antarkata. Jarang diperlukan, tetapi berguna untuk penyempurnaan teks rata kiri-kanan atau judul tampilan.
<h1>Word Spaced Heading Example</h1>
text-overflow: ellipsis
Pangkas teks yang melampaui batas menggunakan elipsis. Properti ini memerlukan overflow: hidden dan white-space: nowrap.
<p class="truncate">This is a very long line of text that will be truncated with an ellipsis</p>
Teks Vertikal dengan writing-mode
writing-mode memutar arah aliran teks. Jika digabungkan dengan text-orientation, properti ini memungkinkan tipografi CJK vertikal atau label kreatif yang diputar.
<div class="label">Vertical Label Text</div>
Pemeriksaan Singkat
Tiga properti apa yang diperlukan untuk menampilkan elipsis saat teks melampaui batas?
Ringkasan
text-align menempatkan konten sebaris di dalam wadahnya. text-decoration menambahkan atau menghapus garis. text-transform mengubah kapitalisasi. white-space: nowrap + overflow: hidden + text-overflow: ellipsis adalah resep klasik untuk memangkas teks.
Belajar CSS dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Perataan, Dekorasi, dan Jarak Teks” gratis?
Ya — teks lengkap “Perataan, Dekorasi, dan Jarak Teks” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Perataan, Dekorasi, dan Jarak Teks”?
Ratakan teks, tambahkan garis bawah atau coretan, dan kontrol jarak huruf serta baris. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Perataan, Dekorasi, dan Jarak Teks” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Keluarga Font dan Font yang Aman untuk Web
- Ukuran, Ketebalan, dan Gaya Font
- Perataan, Dekorasi, dan Jarak Teks
- Google Fonts dan @font-face