Kupas Tuntas CSS Text Overflow, Word Wrap, and Line Breaking Rules

CSS

Dalam artikel ini Anda akan belajar tentang properti berikut:

  • text-overflow
  • word-wrap
  • word-break

CSS Text Overflow

Properti CSS text-overflow menentukan bagaimana konten yang meluap yang tidak ditampilkan harus diberi isyarat kepada pengguna.

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 melayang di atas elemen:

div.test:hover {
    text-overflow: inherit;
    overflow: visible;
}

CSS Word Wrapping

Properti word-wrap CSS memungkinkan kata-kata panjang untuk dapat dipecahkan dan membungkus ke baris berikutnya.

p {
    word-wrap: break-word;
}

CSS Word Breaking

CSS properti word-break menentukan aturan melanggar garis.

p.test1 {
    word-break: keep-all;
}

p.test2 {
    word-break: break-all;
}

Yup... itu CSS yang bisa kita gunakan untuk mengatasi permasalahan text.

Artikel Terkait

Populer

;