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

Question

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

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

Answer 1

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

white-space: nowrap

Answer 2

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

li {
   white-space: nowrap;
}

Answer 3

В дополнение к ответу M K, класс утилиты начальной загрузки 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>

Answer 4

Есть утилита класса css text-nowrap. Вы можете найти его в разделе утилита документы .

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