Как я могу избежать разрыва строки в встроенном элементе?

Я создаю меню с горизонтальными основными входами. Ниже каждого заголовка соответствующего подменю отображаются вертикально. Теперь некоторые более длинные названия меню обернуты несколькими строками. Фактически, "sub" UL столь же широк, как и самое длинное одиночное слово в подменю, и все остальные обернуты соответственно. Я не дал ширины для UL и LI (ни основного, ни подменю).

Итак, мой вопрос: как я могу избежать разрыва строк? Вероятно, я мог бы заменить каждое пространство   (без пробелов), но есть ли другой способ достичь этого?

Ответ 1

Вы пробовали стилизовать li с помощью

white-space: nowrap

Ответ 2

добавление следующего CSS предотвратит разрыв строки:

li {
   white-space: nowrap;
}

Ответ 3

Существует утилита css class text-nowrap. Вы можете найти его в разделе утилиты docs.

<div style="width: 10px">
    <span class="text-nowrap">This line will not break, ever....!!!</span>
</div>

Ответ 4

В ответ на ответ M K класс утилиты bootstrap text-nowrap применяет к нему white-space: nowrap, что будет означать, что любой текст внутри этого класса не будет разбиваться на новую строку. Это может быть полезно, но также может быть болезненным при разработке адаптивного кода.

Если у вас есть фрагмент текста, который вы хотели бы не сломать, лучше всего обернуть его вокруг этого родительского элемента:

<div class="container">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in odio
        <span class="text-nowrap">lobortis,</span>
        condimentum ipsum in, vulputate felis. 
    </p>
</div>