Cegah pemutusan garis elemen rentang

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

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.

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

No line break

dari pada

<span style="white-space:nowrap">No line break</span>

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  . (Menghapus spasi tidak berfungsi.)

Dengan Bootstrap 4 Kelas:

text-nowrap

Ref: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow