Запобігання розриву рядка елемента

У мене є <span>елемент, який я хочу показати без будь-якого розриву рядка. Як я можу це зробити?

Введіть це у свій 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 Приймає те саме задане значення, як властивість для батьківського елемента.

Якщо вам потрібно лише запобігти розривам рядків на символах пробілу, ви можете використовувати  об'єкти між словами:

No line break

замість

<span style="white-space:nowrap">No line break</span>

white-space: nowrapце правильне рішення, але воно запобіжить будь-який розрив у рядку. Якщо ви хочете лише запобігти розриву рядків між двома елементами, це стає трохи складніше:

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

Для запобігання розривів між прольотами, а також для перерв між "Деякі" та "Текстові" можна зробити:

p {
    white-space: nowrap;
}

.text {
    white-space: normal;
}

Це досить добре для Firefox. У Chrome вам додатково потрібно замінити пробіл між прольотами на ""  . (Видалення пробілів не працює.)

З Bootstrap 4 Class:

text-nowrap

Посилання: https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow