Cara Mencegah Ganti Baris dengan CSS

Pengantar

Para pengembang biasanya suka mengemas teks di halaman web. Mengemas teks yang dibatasi dengan cara tertentu dan mencegah masalah desain. Pengemasan teks juga dapat mencegah guliran horizontal. Namun, ada saatnya Anda ingin memblokir teks agar tetap di baris yang sama, berapa pun panjangnya. Anda dapat mencegah ganti-baris dan pengemasan teks untuk elemen tertentu dengan properti white-space di CSS.

Dalam tutorial ini, Anda akan menata gaya blok teks yang sama dengan empat cara berbeda, pertama dengan ganti baris, kemudian tiga kali tanpa ganti baris:

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon.  Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Hal ini akan memberi Anda sejumlah opsi untuk mengemas atau tidak mengemas teks.

Prasyarat

Untuk menyelesaikan tutorial ini, Anda akan memerlukan:

• Editor kode pilihan Anda, seperti nano atau Visual Studio Code
• Peramban web
• Pemahaman dasar-dasar HTML. Anda dapat melihat seri tutorial kami Cara Membangun Situs Web dengan HTML sebagai pengantar.

Langkah 1 — Mencegah dan Memaksa Ganti-Baris di CSS

Dalam langkah ini, Anda akan membuat lembar gaya dengan tiga kelas berbeda. Masing-masing akan menangani ganti-baris yang berbeda: yang pertama akan memutus teks secara asali, sedangkan yang kedua dan ketiga akan memaksa teks tidak membuat baris baru dan berganti baris.

Pertama, buat dan buka berkas baru bernama main.css dengan nano atau editor pilihan Anda:

nano main.css

Tambahkan konten berikut, yang akan memperkenalkan tiga kelas CSS yang menggunakan beberapa properti, termasuk white-space:

.sammy-wrap {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
}
.sammy-nowrap-1 {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
    white-space: nowrap;
}
.sammy-nowrap-2 {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Kelas pertama adalah .sammy-wrap. Ini mendefinisikan enam properti CSS umum yang meliputi border-radius, background-color, border max-width, padding, dan margin-bottom. Kelas ini akan membuat kotak visual, tetapi tidak mendefinisikan properti pengemasan khusus. Berarti ini akan mengganti baris secara asali.

Kelas kedua adalah .sammy-nowrap-1. Ini mendefinisikan kotak yang sama seperti .sammy-wrap, tetapi kini Anda menambahkan properti lain: white-space. Properti white-space memiliki banyak opsi, semuanya mendefinisikan cara memperlakukan white space di dalam elemen yang ditentukan. Di sini, Anda telah mengatur white-space ke nowrap, yang akan mencegah semua ganti baris.

Kelas ketiga adalah .sammy-nowrap-2. Ini menambahkan white-space dan dua properti tambahan: overflow dan text-overflow. Properti overflow menangani scrollable overflow, yang terjadi bila konten di dalam elemen melampaui tepi elemen itu. Properti overflow dapat membuat konten bisa digulir, terlihat, atau tersembunyi. Anda mengatur overflow ke hidden kemudian menggunakan properti text-overflow untuk menambahkan penyesuaian lebih lebih banyak. text-overflow dapat membantu Anda memberi petunjuk kepada pengguna bahwa teks tambahan masih tersembunyi. Anda telah mengaturnya ke ellipsis, sehingga baris Anda tidak akan berganti atau melampaui kotak. CSS akan menyembunyikan teks yang melampaui batas dan menyembunyikan konten dengan ....

Simpan dan tutup berkas Anda.

Kini Anda sudah memiliki lembar gaya, Anda siap membuat berkas HTML pendek dengan beberapa teks sampel. Kemudian, Anda akan memuat laman web di peramban dan memeriksa cara CSS mencegah ganti baris.

Langkah 2 — Membuat Berkas HTML

Dengan kelas CSS yang didefinisikan, Anda dapat menerapkannya ke beberapa teks sampel.

Buat dan buka berkas bernama index.html di editor pilihan Anda. Pastikan menempatkannya dalam folder yang sama seperti main.css:

nano index.html

Tambahkan konten berikut, yang akan menghubungkan main.css sebagai stylesheet, kemudian terapkan kelas ke blok teks sampel:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>How To Prevent Line Breaks with CSS</title>
<link href="main.css" rel="stylesheet">
</head>

<body>
<p class="sammy-wrap"    > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-nowrap-1"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-nowrap-2"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>

<p class="sammy-wrap"    > Medusafish&nbsp;banded&nbsp;killifish&nbsp;convict&nbsp;blenny&nbsp;saury&nbsp;threadsail&nbsp;beluga&nbsp;sturgeon.&nbsp;Indian&nbsp;mul&nbsp;mora&nbsp;cisco&nbsp;masu&nbsp;salmon,&nbsp;roosterfish&nbsp;requiem&nbsp;shark&nbsp;longnose&nbsp;lancetfish&nbsp;bluefish&nbsp;red&nbsp;snapper&nbsp;Sacramento&nbsp;splittail&nbsp;giant&nbsp;danio.</p>
</body>
</html>

Anda telah memberi gaya pengemasan standar ke blok teks pertama, gaya nowrap pada blok teks kedua, dan nowrap yang dibuat hidden dengan ellipsis pada blok teks ketiga. Anda telah memberikan sammy-wrap ke sampel keempat, tetapi Anda mengesampingkan pengemasan asali dengan memasukkan spasi penggabung ( ) secara langsung ke dalam HTML. Jika Anda perlu mencegah ganti baris sebagai situasi sekali jalan, maka spasi penggabung dapat menjadi solusi cepat.

Buka index.html di peramban web dan lihat hasilnya. Empat blok teks Anda akan terlihat seperti ini:

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon.  Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

Anda berhasil menyesuaikan properti CSS untuk mencegah atau memungkinkan ganti baris dalam empat cara berbeda.

Kesimpulan

Dalam tutorial ini, Anda menggunakan CSS untuk mencegah ganti baris pada blok teks. Anda telah menata gaya teks di dalam kotak, lalu menambahkan properti white-space untuk mengesampingkan pengemasan teks asali. Untuk mempelajari lebih lanjut tentang menangani pengemasan teks dan spasi kosong, sebaiknya mendalami properti white-space di CSS selengkapnya.