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

111

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

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

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

введите описание изображения здесь

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

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

html whitespace

— blueFast
источник

145

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

Самая надежная альтернатива - использовать 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>

— Юкка К. Корпела
источник

16

Re: nobr, mozilla предупреждает: «Эта функция нестандартна и не входит в стандартную дорожку. Не используйте ее на производственных сайтах, выходящих в Интернет: она не будет работать для каждого пользователя. Также может быть большая несовместимость между реализациями и поведение может измениться в будущем ". - developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

— Люк,

1

@ Люк, это «стандартное» предупреждение. Они не описывают несовместимость (даже небольшую) и не упоминают ни один браузер, который не поддерживает nobr; нет ни одного.

— Юкка К. Корпела

23

nobrТег находится в той же категории, используя blink: w3.org/TR/html5/obsolete.html#obsolete Либо работать над веб - стандартов или работать над хаотической сети. Выбор за вами.

— Люк,

8

Если вы используете bootstrap, класс text-nowrap уже определен, который соответственно устанавливает стиль.

— Ratatwisker 09

4

@ JukkaK.Korpela, HTML5 сейчас доработан и, что неудивительно, nobrпо-прежнему устарел и «не должен использоваться» .

— Маркус

58

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

— tcak
источник

7

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

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

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

— Грег Литтл
источник

2

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

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

— Ameagher
источник

2

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

Развернуть фрагмент

— Хьюго дер Хангридж
источник

2

Это настоящее решение:

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

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

— Андрей Изман
источник

-1

nobr слишком ненадежен, используйте таблицы

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

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

— Эрик Эстерлинг
источник