CSS3 Text
CSS3 berisi beberapa fitur teks baru.
Dalam bab ini Anda akan belajar tentang sifat-sifat teks berikut:
-
text-overflow -
word-wrap -
word-break
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -o- menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 Text Overflow
CSS3 text-overflow properti menentukan bagaimana meluap konten yang tidak ditampilkan harus memberi isyarat kepada pengguna.
Hal ini dapat dipotong:
Ini adalah beberapa teks panjang yang tidak muat di dalam kotak
atau dapat diterjemahkan sebagai elipsis (...):
Ini adalah beberapa teks panjang yang tidak muat di dalam kotak
Kode CSS 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;
} Cobalah sendiri " Contoh berikut menunjukkan bagaimana Anda dapat menampilkan konten meluap ketika melayang di atas elemen:
CSS3 Firman Wrapping
CSS3 word-wrap properti memungkinkan kata-kata panjang untuk dapat menjadi rusak dan membungkus ke baris berikutnya.
Jika kata terlalu panjang untuk muat di dalam area, mengembang luar:
Ayat ini mengandung kata yang sangat panjang: thisisaveryveryveryveryveryverylongword . Kata panjang akan merusak dan membungkus ke baris berikutnya.
Properti word-wrap memungkinkan Anda untuk memaksa teks untuk membungkus - bahkan jika itu berarti pemisahan itu di tengah kata:
Ayat ini mengandung kata yang sangat panjang: thisisaveryveryveryveryveryverylongword . Kata panjang akan merusak dan membungkus ke baris berikutnya.
Kode CSS adalah sebagai berikut:
Contoh
Memungkinkan kata-kata panjang untuk bisa menjadi rusak dan membungkus ke baris berikutnya:
p {
word-wrap: break-word;
}
Cobalah sendiri " CSS3 Firman Melanggar
CSS3 word-break properti menetapkan garis melanggar aturan.
Paragraf ini berisi beberapa teks. Baris ini akan-pecah-di-tanda hubung.
Paragraf ini berisi beberapa teks. Garis akan istirahat di karakter apapun.
Kode CSS adalah sebagai berikut:
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 »
CSS3 Text Properti
Tabel berikut berisi daftar properti CSS3 teks baru:
| Milik | Deskripsi |
|---|---|
| text-align-last | Menentukan bagaimana untuk menyelaraskan baris terakhir teks |
| text-emphasis | Sebuah istilah untuk pengaturan teks-penekanan-gaya dan teks-penekanan-warna dalam satu deklarasi |
| text-justify | Menentukan bagaimana dibenarkan teks harus selaras dan spasi |
| text-overflow | Menentukan konten bagaimana meluap yang tidak ditampilkan harus memberi isyarat kepada pengguna |
| word-break | Menentukan garis melanggar aturan untuk skrip non-CJK |
| word-wrap | Memungkinkan kata-kata panjang untuk dapat menjadi rusak dan membungkus ke baris berikutnya |