Belajar CSS text-overflow, word-wrap, word-break dan writing-mode

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