Belajar CSS text-overflow, word-wrap, word-break dan writing-mode
Pada CSS3 terdapat fitur baru yaitu mengatur teks saat mereka meluap ke titik lebar perbatasan, dan d
Fitur baru text pada CSS3
Pada CSS3 terdapat fitur baru yaitu mengatur teks saat mereka meluap ke titik lebar perbatasan, dan dengan properti baru ini Anda bisa menggunakannya untuk memodifikasi konten teks yang meluap, namun beberapa properti ini sudah ada sejak lama. Properti ini memberi Anda kontrol tepat atas rendering teks pada browser web.
Text-overflow
Dengan properti text-overflow
Anda bisa menggunakannya untuk menentukan bagaimana konten teks yang meluap dan tidak ditampilkan harus memberi isyarat kepada pengguna.
Kemungkinan nilai untuk properti ini adalah
- clip
- ellipsis
- string dll.
#clip {
text-overflow: clip;
}
#ellipsis {
text-overflow: ellipsis;
}
#string {
ext-overflow: “—-“;
}
Word-wrap
Dengan properti word-wrap
Anda bisa menggunakannya untuk memecahkan kata yang panjang dan memaksanya untuk turun ke baris baru.
Kemungkinan nilai untuk properti ini adalah
- normal (Default)
- break-word dll.
#word-wrap {
word-wrap: break-word;
}
Word-break
Dengan properti word-break
Anda bisa menggunakannya untuk memecahkan baris untuk teks dan memaksanya untuk turun ke baris baru.
Kemungkinan nilai untuk properti ini adalah
- normal (Default)
- break-all
- keep-all dll.
#keep-all {
word-break: keep-all;
}
#break-all {
word-break: break-all;
}
Writing-mode
Dengan properti writing-mode
Anda bisa menggunakannya untuk mengatur apakah baris teks diletakkan secara horizontal atau vertikal.
Kemungkinan nilai untuk properti ini adalah
- horizontal-tb (Default)
- vertical-rl
- vertical-lr
#writing-mode {
writing-mode: vertical-rl;
}
Daftar properti text
Properti | Kegunaanya |
---|---|
text-overflow | Mengatur bagaimana konten teks yang meluap melebihi lebar yang ditentukan |
word-wrap | Digunakan untuk memecahkan kata yang panjang |
word-break | Digunakan untuk memecahkan baris untuk teks |
writing-mode | Digunakan untuk mengatur apakah baris teks diletakkan secara horizontal atau vertikal |