Блог

У меня есть список с использованием начальной загрузки 4, но какой-то элемент внутри содержит длинный текст, это вызывает проблемы на устройстве с маленьким экраном. Я пытался использовать white-space:nowrap класс or text-nowrap , но ничего не произошло. Есть ли способ это исправить?

Мой код:

 <ul class='navbar-nav'>
   <li class='nav-item'>
       <a href='#' class='text-nowrap'>long textt...........</a>
   </li>
</ul>
 

Это то, что вы ищете?

 <ul class='navbar-nav'>
   <li class='nav-item'>
       <a href='#'>long textt...........</a>
   </li>
</ul>
 

 .nav-item {
  width: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
 

https://jsfiddle.net/7wc3L8bh / — реальный пример

Если это так, то вам следует использовать класс начальной загрузки 4 text-truncate

Смотрите Его документацию здесь (обратите внимание, что он запрашивает block элемент)

Если это не так, и вы хотите, чтобы ваш текст был виден в следующей строке — используйте class text-nowrap .

Смотрите Его документацию здесь (обратите внимание, элемент должен быть исправлен width )

Чтобы длинные строки текста не нарушали компоновку ваших компонентов, используйте .text-break для установки перенос слов: разрыв слова и разрыв слова: разрыв слова. Мы используем перенос слов вместо более распространенного переноса переполнения для более широкой поддержки браузера и добавляем устаревшее слово-break: break-word, чтобы избежать проблем с гибкими контейнерами.

 <ul class="navbar-nav">
   <li class="nav-item">
       <a href="#" class="text-break">long textt...........</a>
   </li>
</ul> 

https://getbootstrap.com/docs/4.5/utilities/text/#word-break