如何破解引导程序4列表项中的单词

Question

我有一个使用bootstrap 4的列表，但里面的一些项目包含长文本，这会在小屏幕设备上造成问题。我尝试使用white-space:nowrap或类text-nowrap，但没有任何结果。有办法解决这个问题吗？

我的代码：

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

Answer 1

这就是您想要的吗？

<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/-的真实示例

---

如果是，则应使用Bootstrap 4类text-truncate

请参阅此处的文档(注意，它需要block元素(

---

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

请参阅此处的文档(注意，元素应具有固定的width(

Answer 2

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

<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-中断