Уникайте розриву рядків між елементами html

У мене є цей <td>елемент:

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

Я сподівався зберегти це в єдиний рядок, але ось що я отримую:

Як бачите, прапор та номер телефону знаходяться в окремих рядках. Вони  працюють між номерами телефонного номера, але не між прапором та номером телефону.

Як я можу переконатися, що рендер взагалі не вводить жодного розриву рядків?

Існує кілька способів запобігти розривам рядків у вмісті. Використання  - це один із способів, і він добре працює між словами, але використання його між порожнім елементом та текстом не має чітко визначеного ефекту. Те саме стосується і більш логічного та доступнішого підходу, коли ви використовуєте зображення для піктограми.

Найбільш надійною альтернативою є використання nobrрозмітки, яка є нестандартною, але універсально підтримується і працює, навіть якщо CSS вимкнено:

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

(У  цьому випадку ви можете використовувати, але не потрібно, замість пробілів.)

Інший спосіб - nowrapатрибут (застарілий / застарілий, але все ще працює добре, за винятком деяких рідкісних вигадок):

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

Тоді є CSS-спосіб, який працює в браузерах із підтримкою CSS і потребує трохи більше коду:

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

CSS для цього td: white-space: nowrap;має вирішити.

Якщо вам це потрібно для кількох слів або елементів, але ви не можете застосувати його до цілого TD або подібного, тег Span може бути використаний.

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

Якщо ви використовуєте версію класу, не забудьте налаштувати CSS, як це детально описано у прийнятій відповіді.

Якщо <i>тег не відображається як блок і викликає проблему, це має працювати:

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

У деяких випадках (наприклад, створений HTML і вставлений JavaScript) ви також можете спробувати вставити столяр нульової ширини:

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

Це справжнє рішення:

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

Приклад, зображення, які завжди перед текстом:

nobr занадто ненадійний, використовуйте таблиці

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

Все йде по одній лінії, все на одному рівні, і ви маєте набагато більше свободи, якщо хочете щось змінити пізніше.