Избегайте разрывов строки между элементами 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>

Все идет по одной линии, все на одном уровне, и у вас гораздо больше свободы, если вы захотите что-то изменить позже.