Html 如何在Bootstrap4的列表项中打断单词？

我有一个使用Bootstrap4的列表，但是其中的一些项目包含长文本，这会在小屏幕设备上导致问题。我试图使用

空白：nowrap

或class

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>

-实例

---

如果是，则应使用Bootstrap 4类

text truncate

参见其文档（注意，它需要

块

元素）

---

如果不是，并且您希望文本在下一行可见-请使用class

text nowrap

---

请参阅其文档（注意，元素应具有固定的

宽度
）
使用.text break设置换行：break word和word break:break word，以防止长字符串破坏组件的布局。为了更广泛的浏览器支持，我们使用word wrap而不是更常见的overflow wrap，并添加了不推荐使用的单词break:break word以避免flex容器出现问题





我尝试添加，但在bootstrap 4.0中它似乎仍然不存在。如果您的框架没有，让我们自己添加一些css。文本中断{word break:break word！重要；word wrap:break word！重要；}使用
text nowrap
，我可以将
a
标记的
宽度设置为100%，继承
li
覆盖它们？是的，为什么不可以）但我认为类
text nowrap
应该添加到
li
元素中，而不是
a
它工作正常。非常感谢；）
.nav-item {
  width: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}