membuat teks tulisan turun ke bawah menyesuaikan lebar halaman
Tentu, jika Anda ingin membuat teks turun ke bawah sesuai dengan lebar kolom tanpa menggunakan `white-space: nowrap`, Anda dapat menggunakan pendekatan CSS lainnya. Salah satu cara yang umum digunakan adalah dengan menggunakan `display: block` pada elemen teks, dan memberikan lebar maksimum untuk elemen tersebut sehingga teks akan turun ke bawah jika lebar kolom tidak mencukupi. Berikut adalah contoh penggunaannya:
css
/* Style for the title */
.title {
font-size: 24px;
font-weight: bold;
display: block; /* Mengubah teks menjadi elemen blok */
max-width: 100%; /* Batasi lebar maksimum agar teks turun ke bawah jika tidak cukup lebar */
margin-bottom: 10px; /* Spasi antara judul dan slogan */
}
/* Style for the slogan */
.slogan {
font-size: 18px;
display: block; /* Mengubah teks menjadi elemen blok */
max-width: 100%; /* Batasi lebar maksimum agar teks turun ke bawah jika tidak cukup lebar */
}
x
Dengan pengaturan ini, teks judul dan slogan akan turun ke bawah jika lebar kolom tidak mencukupi, sehingga tidak perlu menggunakan `white-space: nowrap`.
Pastikan untuk menyesuaikan nilai `max-width` sesuai dengan kebutuhan Anda, tergantung pada berapa banyak lebar yang ingin Anda alokasikan untuk teks judul dan slogan.