html - How to break word in list item of bootstrap 4?

Question

I'm having a list using bootstrap 4, but some item inside contain long text, it causes problem on small screen device. I tried to use white-space:nowrap or class text-nowrap, but nothing occur. Is there anyway to fix this?

My code:

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

Answer 1

Is it what you are looking for?

<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/ - real example

---

If it is, than you should use Bootstrap 4 class text-truncate

See its documentation here (Note, that it requres block element)

---

If it is not, and you want your text to be visible on the next line - use class text-nowrap.

See its documentation here (Note, element should have fixed width)