如何避免内联元素中的换行？

Question

我正在构建一个带有水平主条目的菜单。 在每个下面相应的子菜单标题垂直显示。 现在，一些较长的菜单标题被包裹在几行上。 实际上，“sub”UL与子菜单中最长的单个单词一样宽，而所有其他单词都相应地包装。 我没有为UL和LI提供宽度（既不是主菜单也不是子菜单）。

所以我的问题是，我怎样才能避免破线？ 也许我可以替换每个空间  （无空间角色），但有不同的方法来实现这一目标吗？

Answer 1

你有没有试过李的样式

white-space: nowrap

？

Answer 2

添加以下CSS将阻止该行破坏：

li {
   white-space: nowrap;
}

Answer 3

除了MK的答案之外，bootstrap实用程序类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>