Hindari pemisah baris di antara elemen html

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:

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?

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>

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

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.

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>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

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>

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:

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.