Hindari pemisah baris di antara elemen html

110

Saya memiliki <td>elemen ini :

<td><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

Saya berharap untuk menyimpannya dalam satu baris, tetapi inilah yang saya dapatkan:

masukkan deskripsi gambar di sini

Seperti yang Anda lihat, bendera dan nomor telepon berada di baris terpisah. Itu  berfungsi di antara nomor-nomor nomor telepon, tetapi tidak di antara bendera dan nomor telepon.

Bagaimana saya bisa memastikan bahwa tidak ada pemutusan baris sama sekali yang diperkenalkan oleh perender?

html whitespace

— blueFast
sumber

144

Ada beberapa cara untuk mencegah jeda baris dalam konten. Menggunakan  adalah satu cara, dan berfungsi dengan baik di antara kata-kata, tetapi menggunakannya di antara elemen kosong dan beberapa teks tidak memiliki efek yang terdefinisi dengan baik. Hal yang sama berlaku untuk pendekatan yang lebih logis dan lebih mudah diakses di mana Anda menggunakan gambar sebagai ikon.

Alternatif paling ampuh adalah menggunakan nobrmarkup, yang tidak standar tetapi didukung secara universal dan berfungsi bahkan ketika CSS dinonaktifkan:

<td><nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</nobr></td>

(Anda dapat, tetapi tidak perlu, menggunakan  sebagai pengganti spasi dalam kasus ini.)

Cara lain adalah dengan nowrapatribut (deprecated / obsolete, but still working fine, kecuali untuk beberapa quirks langka):

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

Lalu ada cara CSS, yang berfungsi di browser yang mendukung CSS dan membutuhkan lebih banyak kode:

<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

— Jukka K. Korpela
sumber

16

Re: nobr, mozilla memperingatkan "Fitur ini tidak standar dan tidak berada di track standar. Jangan gunakan di situs produksi yang menghadap ke Web: fitur ini tidak akan berfungsi untuk setiap pengguna. Mungkin juga ada ketidakcocokan yang besar antara implementasi dan perilaku dapat berubah di masa depan. " - developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

— Luke

1

@ Luke, itu peringatan "standar". Mereka tidak menjelaskan ketidakcocokan apa pun (bahkan yang kecil) dan tidak menyebutkan browser apa pun yang tidak mendukung nobr; tidak ada.

— Jukka K. Korpela

23

The nobrtag di kategori yang sama dengan menggunakan blink: w3.org/TR/html5/obsolete.html#obsolete Entah Anda bekerja menuju standar web atau Anda bekerja menuju web kacau. Pilihan ada padamu.

— Lukas

8

Jika Anda menggunakan bootstrap, kelas "text-nowrap" sudah ditentukan yang menetapkan jenis yang sesuai.

— Ratatwisker

4

@ JukkaK.Korpela, HTML5 sekarang telah diselesaikan dan, sangat tidak mengejutkan, nobrmasih ditinggalkan dan "tidak boleh digunakan" .

— Marcus

58

CSS untuk itu td: white-space: nowrap;harus menyelesaikannya.

— tcak
sumber

7

Jika Anda membutuhkan ini untuk beberapa kata atau elemen, tetapi tidak dapat menerapkannya ke seluruh TD atau serupa, tag Span dapat digunakan.

<span style="white-space: nowrap">Text to break together</span>
    or 
<span class=nobr>Text to break together</span>

Jika Anda menggunakan versi kelas, ingatlah untuk mengatur CSS seperti yang dijelaskan dalam jawaban yang diterima.

— Greg Little
sumber

2

Jika <i>tag tidak ditampilkan sebagai blok dan menyebabkan masalah, maka ini akan berfungsi:

<td style="white-space:nowrap;"><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

— ameagher
sumber

2

Dalam beberapa kasus (mis. Html yang dibuat dan disisipkan oleh JavaScript) Anda juga mungkin ingin mencoba memasukkan penggabung dengan lebar nol:

.wrapper{
  width: 290px;   
  white-space: no-wrap;
  resize:both;
  overflow:auto; 
  border: 1px solid gray;
}

.breakable-text{
  display: inline;
  white-space: no-wrap;
}

.no-break-before {
  padding-left: 10px;
}

<div class="wrapper">
<span class="breakable-text">Lorem dorem tralalalala LAST_WORDS</span>&#8205;<span class="no-break-before">TOGETHER</span>
</div>

Luaskan cuplikan

— hugo der hungrige
sumber

2

Inilah solusi sebenarnya:

<td>
  <span class="inline-flag">
    <i class="flag-bfh-ES"></i> 
    <span>+34 666 66 66 66</span>
  </span>
</td>

css:

.inline-flag {
   position: relative;
   display: inline;
   line-height: 14px; /* play with this */
}

.inline-flag > i {
   position: absolute;
   display: block;
   top: -1px; /* play with this */
}

.inline-flag > span {
   margin-left: 18px; /* play with this */
}

Contoh, gambar yang selalu sebelum teks:

— Andrey Izman
sumber

-1

nobr terlalu tidak bisa diandalkan, gunakan tabel

<table>
      <tr>
          <td> something </td>
          <td> something </td>
      </tr>
</table>

Semuanya berjalan pada jalur yang sama, semuanya sejajar satu sama lain, dan Anda memiliki lebih banyak kebebasan jika Anda ingin mengubah sesuatu nanti.

— Erik Österling
sumber