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

belajar css

Fitur baru text overflow pada CSS3

Pada CSS3 terdapat fitur baru yaitu mengatur teks saat meluap ke titik lebar perbatasan, dan dengan property baru ini Anda bisa memodifikasi konten teks, namun beberapa property ini sudah ada sejak lama. Property ini memberi Anda kontrol tepat atas rendering teks pada browser web.

CSS text-overflow

Dengan property text-overflow Anda bisa menggunakannya untuk menentukan bagaimana konten teks yang meluap dan tidak ditampilkan harus memberi isyarat kepada pengguna.

Kemungkinan nilai untuk property ini adalah

  • clip
  • ellipsis
  • string dll.

Contoh:

Editor Online
  1. #clip {
  2. text-overflow: clip;
  3. }
  4. #ellipsis {
  5. text-overflow: ellipsis;
  6. }
  7. #string {
  8. ext-overflow: “—-“;
  9. }

CSS word-wrap

Dengan property word-wrap Anda bisa menggunakannya untuk memecahkan kata yang panjang dan memaksanya untuk turun ke baris baru. 

Kemungkinan nilai untuk property ini adalah

  • normal (Default)
  •  break-word dll.

Contoh:

Editor Online
  1. #word-wrap {
  2. word-wrap: break-word;
  3. }

CSS word-break

Dengan property word-break Anda bisa menggunakannya untuk memecahkan baris untuk teks dan memaksanya untuk turun ke baris baru. 

Kemungkinan nilai untuk property ini adalah

  • normal (Default)
  • break-all
  • keep-all dll.

Contoh:

Editor Online
  1. #keep-all {
  2. word-break: keep-all;
  3. }
  4. #break-all {
  5. word-break: break-all;
  6. }

CSS writing-mode

Dengan property writing-mode Anda bisa menggunakannya untuk mengatur apakah baris teks diletakkan secara horizontal atau vertikal.

Kemungkinan nilai untuk property ini adalah

  • horizontal-tb (Default)
  • vertical-rl
  • vertical-lr

Contoh:

Editor Online
  1. #writing-mode {
  2. writing-mode: vertical-rl;
  3. }

Daftar property CSS3 text overflow

PropertyKegunaanya
text-overflowMenentukan bagaimana konten teks yang meluap dan tidak ditampilkan harus memberikan isyarat kepada pengguna
word-wrapDigunakan untuk memecahkan kata yang panjang
word-breakDigunakan untuk memecahkan baris untuk teks
writing-modeDigunakan untuk mengatur apakah baris teks diletakkan secara horizontal atau vertikal

Leave a Reply

Your email address will not be published. Required fields are marked *