CSS3 Text
CSS3 berisi beberapa fitur teks baru.
Dalam bab ini Anda akan belajar tentang sifat-sifat teks berikut:
- texs-overflow
- word-wrap
- word-break
CSS3 Text Overflow
Properti CSS3 texs-overflow menentukan bagaimana meluap konten yang tidak ditampilkan harus mengisyaratkan kepada pengguna.
Hal ini dapat dipotong:
atau dapat diberikan sebagai elipsis (...):
Kode CSS adalah sebagai berikut:
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid black;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
}
Contoh berikut menunjukkan bagaimana Anda dapat menampilkan konten meluap ketika melayang di atas elemen:
p.test2:hover {
text-overflow: inherit;
overflow: visible;
}
CSS3 word Wrapping
Properti CSS3 word-wrap memungkinkan kata-kata panjang untuk dapat dipecah dan membungkus ke baris berikutnya.
Jika kata terlalu panjang untuk muat di dalam area, mengembang luar.
Properti word-wrap memungkinkan Anda untuk memaksa teks untuk membungkus - bahkan jika itu berarti membelah di tengah kata:
Kode CSS adalah sebagai berikut:
p {
word-wrap: break-word;
}
CSS3 Kata Melanggar
The CSS3 kata-break properti menetapkan garis melanggar aturan.
Kode CSS adalah sebagai berikut:
p.test1 {
word-break: keep-all;
}
p.test2 {
word-break: break-all;
}
0 komentar:
Posting Komentar