Efek Teks CSS
CSS Text Overflow, Word Wrap, Aturan Pemutusan Baris, dan Mode Penulisan
Dalam bab ini Anda akan mempelajari tentang sifat-sifat berikut:
text-overflowword-wrapword-breakwriting-mode
Overflow Teks CSS
Properti CSS text-overflowmenentukan bagaimana konten yang meluap yang tidak ditampilkan harus diisyaratkan kepada pengguna.
Itu bisa dipotong:
Ini adalah beberapa teks panjang yang tidak muat di dalam kotak
atau dapat dirender sebagai elipsis (...):
Ini adalah beberapa teks panjang yang tidak muat di dalam kotak
Kode CSSnya adalah sebagai berikut:
Contoh
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
Contoh berikut menunjukkan bagaimana Anda dapat menampilkan konten yang meluap saat mengarahkan kursor ke elemen:
Contoh
div.test:hover {
overflow: visible;
}
Pembungkus Kata CSS
Properti CSS word-wrapmemungkinkan kata-kata panjang untuk dapat dipecah dan dibungkus ke baris berikutnya.
Jika sebuah kata terlalu panjang untuk muat di dalam suatu area, kata itu akan meluas ke luar:
Paragraf ini berisi kata yang sangat panjang: ini adalah kata yang sangat sangat sangat sangat sangat panjang. Kata panjang akan pecah dan membungkus ke baris berikutnya.
Properti Word-wrap memungkinkan Anda memaksa teks untuk dibungkus - bahkan jika itu berarti memisahkannya di tengah kata:
Paragraf ini berisi kata yang sangat panjang: ini adalah kata yang sangat sangat sangat sangat sangat panjang. Kata panjang akan pecah dan membungkus ke baris berikutnya.
Kode CSSnya adalah sebagai berikut:
Contoh
Biarkan kata-kata panjang untuk dapat dipecah dan dibungkus ke baris berikutnya:
p {
word-wrap: break-word;
}
Pemecah Kata CSS
Properti CSS word-breakmenentukan aturan pemutusan baris.
Paragraf ini berisi beberapa teks. Baris ini akan-break-at-tanda hubung.
Paragraf ini berisi beberapa teks. Garis akan putus pada karakter apa pun.
Kode CSSnya adalah sebagai berikut:
Contoh
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
Mode Penulisan CSS
Properti CSS writing-modemenentukan apakah baris teks diletakkan secara horizontal atau vertikal.
Beberapa teks dengan elemen span dengan avertikal-rlmode penulisan.
Contoh berikut menunjukkan beberapa mode penulisan yang berbeda:
Contoh
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
Properti Efek Teks CSS
Tabel berikut mencantumkan properti efek teks CSS:
| Property | Description |
|---|---|
| text-justify | Specifies how justified text should be aligned and spaced |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| word-break | Specifies line breaking rules for non-CJK scripts |
| word-wrap | Allows long words to be able to be broken and wrap onto the next line |
| writing-mode | Specifies whether lines of text are laid out horizontally or vertically |