Предотвратить разрыв строки элемента span

243

У меня есть <span>элемент, который я хочу отобразить без разрыва строки. Как я могу это сделать?

html css Randomblue
источник
если вы хотите , чтобы подавить их, проверить stackoverflow.com/questions/425274/...
amwinter

Ответы:

409

Поместите это в свой CSS:

white-space:nowrap;

Получите больше информации здесь: http://www.w3.org/wiki/CSS/Properties/white-space

white-space

white-spaceСвойство декларирует , как пустое пространство внутри элемента обрабатывается.

Ценности

normal Это значение предписывает пользовательским агентам свернуть последовательности пробелов и разбивать строки по мере необходимости, чтобы заполнить линейные блоки.

pre Это значение предотвращает свертывание пользовательских агентов последовательностями пробелов. Строки прерываются только в новых строках в источнике или при появлении «\ A» в сгенерированном контенте.

nowrap Это значение сворачивает пробел, как для «нормального», но подавляет разрывы строк в тексте.

pre-wrap Это значение предотвращает свертывание пользовательских агентов последовательностями пробелов. Строки прерываются на новых строках в источнике, при появлении «\ A» в сгенерированном содержимом и при необходимости заполняют строки.

pre-line Это значение указывает агентам пользователя свернуть последовательности пробелов. Строки прерываются на новых строках в источнике, при появлении «\ A» в сгенерированном содержимом и при необходимости заполняют строки.

inherit Принимает то же значение, что и свойство для родительского элемента.

Даан
источник
3
Также приятно добавить еще немного документации здесь: w3.org/wiki/CSS/Properties/white-space
Юстус Ромийн
21
Для случая, когда у вас есть много промежутков внутри div, и вы хотите получить однострочный промежуток, но не однострочный div, вы должны добавить в span также display: inline-block ;. Надеюсь, это кому-нибудь поможет.
Walv
16

Если вам нужно только предотвратить разрывы строк на пробелах, вы можете использовать &nbsp;объекты между словами:

No&nbsp;line&nbsp;break

вместо того

<span style="white-space:nowrap">No line break</span>
Брент Уошберн
источник
1

white-space: nowrapэто правильное решение, но оно предотвратит любой разрыв в линии. Если вы хотите только предотвратить разрывы строк между двумя элементами, это будет немного сложнее:

<p>
    <span class="text">Some text</span>
    <span class="icon"></span>
</p>

Чтобы предотвратить разрывы между интервалами, но разрешить разрывы между «Some» и «text», можно сделать:

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

Этого достаточно для Firefox. В Chrome вам дополнительно нужно заменить пробел между интервалами на &nbsp;. (Удаление пробелов не работает.)

wortwart
источник