HTML öğeleri arasında satır sonu olmasını önleyin

Bu <td>öğeye sahibim :

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

Bunu tek bir satırda tutmayı umuyordum, ama şunu elde ediyorum:

Gördüğünüz gibi bayrak ve telefon numarası ayrı satırlarda.  Ancak bayrak ve telefon numarası arasında, telefon numarasının sayı arasındaki çalışıyor.

Oluşturucu tarafından satır sonu olmadığından nasıl emin olabilirim?

İçerikte satır kesmelerini önlemenin birkaç yolu vardır. Kullanımı  bir yoldur ve kelimeler arasında iyi çalışır, ancak boş bir öğe ile bazı metinler arasında kullanılması iyi tanımlanmış bir etkiye sahip değildir. Aynı şey, bir simge için bir görüntü kullandığınız daha mantıklı ve daha erişilebilir bir yaklaşım için de geçerlidir.

En sağlam alternatif, nobrstandart olmayan ancak evrensel olarak desteklenen ve CSS devre dışı bırakıldığında bile çalışan işaretlemeyi kullanmaktır :

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

(  Bu durumda boşluk yerine kullanabilirsiniz, ancak gerekli değildir .)

Başka bir yol da nowrapözniteliktir (kullanımdan kaldırıldı / eski, ancak bazı nadir tuhaflıklar dışında hala iyi çalışıyor):

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

Ardından, CSS etkin tarayıcılarda çalışan ve biraz daha fazla koda ihtiyaç duyan CSS yolu var:

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

Bu td için CSS: white-space: nowrap;bunu çözmelidir.

Buna birkaç kelime veya öğe için ihtiyacınız varsa, ancak bunu bütün bir TD veya benzerine uygulayamıyorsanız, Span etiketi kullanılabilir.

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

Sınıf sürümünü kullanıyorsanız, CSS'yi kabul edilen yanıtta ayrıntılı olarak açıklandığı gibi ayarlamayı unutmayın.

Eğer <i>etiketi bir blok olarak görüntülenir ve probelm neden olmadığından o zaman bu çalışması gerekir:

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

Bazı durumlarda (örneğin, JavaScript tarafından oluşturulan ve eklenen html), sıfır genişlikli bir birleştirici eklemeyi de deneyebilirsiniz:

.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>

Gerçek çözüm bu:

<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 */
}

Örnek, her zaman metinden önce gelen resimler:

nobr çok güvenilmez, tabloları kullan

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

Her şey aynı çizgide gidiyor, her şey birbiriyle aynı seviyede ve daha sonra bir şeyi değiştirmek isterseniz çok daha fazla özgürlüğünüz var.