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.
Untuk menyelesaikan tutorial ini, Anda akan memerlukan:
nano
atau Visual Studio CodeDalam 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.
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 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>
</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.
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.