Perpaduan css white-space: nowrap dan word-wrap: break-word

Penggunaan white-space: nowrap dan word-wrap: break-word pada css mempunyai peranan masing-masing, keduanya dapat mempengaruhi sebuah Konten atau elemen.


white-space: nowrap css yang dapat digunakan tanpa ada baris baru.

word-wrap: break-word css yang digunakan agar isi tidak keluar dari konten.

keterangan :

contoh hasil css white-space: nowrap dan word-wrap: break-word, lihat pada konten / garis

Penulisan CSS :

white-space: nowrap

p { white-space: nowrap;
}

word-wrap: break-word

p { word-wrap: break-word;
}

Kita dapat menggabungkan kedua css tersebut terutama pada konten yang menggunakan tabel atau border agar isi tetap berada di dalam konten dalam keadaaan apapun.

Contoh lain dalam penerapan pada css tooltip

keterangan :

contoh penggunaan pada css Tooltip white-space: nowrap dan word-wrap: break-word, ex: 2 css yang sudah digabungkan.

CSS EXAMPLE

p { word-wrap: break-word;
white-space: nowrap;
}

Demikian semoga bermanfaat.