Избегайте разрыва строки между элементами html

У меня есть этот элемент <td>:

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

Я надеялся сохранить это в одной строке, но это то, что я получаю:

enter image description here

Как вы можете видеть, флаг и номер телефона находятся в отдельных строках. &nbsp; работают между номерами телефонного номера, но не между флагом и номером телефона.

Как я могу убедиться, что визуализатор вообще не вводит разрыв строки?

Ответы

Ответ 1

Существует несколько способов предотвратить разрывы строк в контенте. Использование &nbsp; является одним из способов и отлично работает между словами, но использование его между пустым элементом и некоторым текстом не имеет четко определенного эффекта. То же самое относится к более логичному и более доступному подходу, когда вы используете изображение для значка.

Наиболее надежной альтернативой является использование разметки nobr, которая нестандартна, но поддерживается повсеместно и работает даже при отключении CSS:

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

(Вы можете, но не обязательно, использовать &nbsp; вместо пробелов в этом случае.)

Другим способом является атрибут nowrap (устаревший/устаревший, но все еще отлично работает, за исключением некоторых редких причуд):

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

Тогда theres способ CSS, который работает в браузерах с поддержкой CSS и нуждается в немного больше кода:

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

Ответ 2

CSS для этого td: white-space: nowrap; должен его решить.

Ответ 3

Если вам нужно это для нескольких слов или элементов, но не может применить его ко всему TD или тому подобному, можно использовать тег Span.

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

Если вы используете версию класса, не забудьте настроить CSS, как указано в принятом ответе.

Ответ 4

Если тэг <i> не отображается как блок и вызывает пробку, тогда это должно работать:

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

Ответ 5

В некоторых случаях (например, 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>