Cegah pemutusan garis elemen rentang

242

Saya memiliki <span>elemen yang ingin saya tampilkan tanpa jeda baris. Bagaimana saya bisa melakukan itu?

html css Randomblue
sumber
jika Anda ingin menekannya, periksa stackoverflow.com/questions/425274/…
amwinter

Jawaban:

408

Letakkan ini di CSS Anda:

white-space:nowrap;

Dapatkan informasi lebih lanjut di sini: http://www.w3.org/wiki/CSS/Properties/white-space

white-space

The white-spaceproperti menyatakan bagaimana ruang putih di dalam elemen ditangani.

Nilai-nilai

normal Nilai ini mengarahkan agen pengguna untuk menciutkan urutan ruang putih, dan memecah garis yang diperlukan untuk mengisi kotak garis.

pre Nilai ini mencegah agen pengguna dari runtuhnya urutan ruang putih. Baris hanya terputus pada baris baru di sumber, atau pada saat terjadi "\ A" dalam konten yang dihasilkan.

nowrap Nilai ini menciutkan white space sebagai 'normal', tetapi menekan jeda baris dalam teks.

pre-wrap Nilai ini mencegah agen pengguna dari runtuhnya urutan ruang putih. Baris terputus pada baris baru di sumber, pada kejadian "\ A" dalam konten yang dihasilkan, dan sebagaimana diperlukan untuk mengisi kotak baris.

pre-line Nilai ini mengarahkan agen pengguna ke runtuhnya urutan ruang putih. Baris terputus pada baris baru di sumber, pada kejadian "\ A" dalam konten yang dihasilkan, dan sebagaimana diperlukan untuk mengisi kotak baris.

inherit Mengambil nilai yang ditentukan sama dengan properti untuk induk elemen.

Daan
sumber
3
Juga bagus untuk menambahkan beberapa dokumentasi lagi di sini: w3.org/wiki/CSS/Properties/white-space
Justus Romijn
21
Untuk kasus ketika Anda memiliki banyak bentang di dalam div dan Anda ingin mencapai rentang baris tunggal tetapi bukan baris baris tunggal, Anda harus menambahkan span juga menampilkan: inline-block ;. Semoga ini bisa membantu seseorang.
walv
16

Jika Anda hanya perlu mencegah jeda baris pada karakter spasi, Anda dapat menggunakan &nbsp;entitas di antara kata-kata:

No&nbsp;line&nbsp;break

dari pada

<span style="white-space:nowrap">No line break</span>
Brent Washburne
sumber
1

white-space: nowrapadalah solusi yang tepat tetapi akan mencegah jeda dalam satu baris. Jika Anda hanya ingin mencegah jeda baris antara dua elemen, ini akan menjadi sedikit lebih rumit:

<p>
    <span class="text">Some text</span>
    <span class="icon"></span>
</p>

Untuk mencegah jeda antar rentang tetapi untuk memungkinkan jeda antara "Sebagian" dan "teks" dapat dilakukan dengan:

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

Itu cukup bagus untuk Firefox. Di Chrome Anda juga perlu mengganti spasi putih antara rentang dengan &nbsp;. (Menghapus spasi tidak berfungsi.)

berjalan cepat
sumber