Pada Artikel kali ini saya akan membahas Property CSS, baiklah dalam pembahasan kali ini tentang Cara menggunakan word-break property css. Word-break berfungsi untuk memberikan batas sesuai content yang dibuat dan word-break sendiri hampir sama dengan property overflow. Bagaimana cara penggunaannya dalam sebuah content mari ikutin langkah-langkah berikut ini:Langkah pertama buat file HTML lalu ketikkan struktur HTMLnya seperti berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Menggunakan Word-Break Property CSS</title>
<style>
div{
width: 200px;
border: 3px solid #00fce3;
padding:10px;
}
.break-word{
word-break: break-word;
}
.break-all{
word-break: break-all;
}
</style>
</head>
<body>
<h1>Menggunakan Property CSS word-break </h1>
<div>
incidunt?Loremincidunt?Loremincidunt?Lorem incidunt?Lorem Lorem ipsum dolor sit amet,consecteturadipisicingelit. Architecto illo consequatur, quidem tempora hic laborum, ea sapiente quis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo consequatur, quidem tempora hic laborum, ea sapiente quis.
</div>
<div class="beark1">
incidunt?Loremincidunt?Loremincidunt?Lorem incidunt?Lorem Similique, incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo consequatur, quidem tempora hic laborum, ea sapiente quis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo consequatur, quidem tempora hic laborum, ea sapiente quis.
</div>
<div class="break2">
incidunt?Loremincidunt?Loremincidunt?Lorem incidunt?Lorem Adipisci,eligendidelenitifacilis!
</div>
</body>
</html>
dalam code diatas saya membuat 3 buah div yang sudah diberi sebuah nama class, dan ukuran div tersebut diberi nilai width = 200px, nah didalam div diberikan sebuah paragraph atau kalimat.
sekarang coba sahabat simpan file HTMLnya lalu jalankan pada browser maka tampilnnya seperti ini:
Jadi pada div dan div class=break1 content melebihi ukuran yang sudah dibuat karena dapat dilihat text yang dibuat tanpa spasi melewati ukuran lebar div, sedangkan untuk div class=break2 pada css diberi nilai break-all sehingga content tidak melebihi ukuran dari lebar yang sudah ditentukan.
Demikian pembahasan artikel kali ini tentang Cara menggunakan word-break property css, sampai jumpa dalam kesempatan lainnya .Semoga bermanfaat dan selamat mencoba.
terima kasih