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

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

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

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

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

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

6 73
html whitespace

6 ответов:

есть несколько способов предотвратить разрывы строк в содержании. Используя &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>

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

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

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

35

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

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

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

3

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

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

1

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

Это реальное решение:

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

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

enter image description here

0