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

243

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

html css

если вы хотите , чтобы подавить их, проверить 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

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

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 вам дополнительно нужно заменить пробел между интервалами на  . (Удаление пробелов не работает.)

— wortwart
источник

1

С Bootstrap 4 класса:

text-nowrap

Ссылка: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow

— Мистер перфекционист
источник