Question

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

所以我的问题是，我怎样才能避免破线？可能我可以用 （无空格字符）替换每个空格，但是有不同的方法来实现这个目标吗？

Answer 1

您是否尝试使用

设置样式

white-space: nowrap

Answer 2

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

li {
   white-space: nowrap;
}

Answer 3

除了M K的答案之外，引导实用程序类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。您可以在docs。

的实用程序部分找到它

<div style="width: 10px">
    <span class="text-nowrap">This line will not break, ever....!!!</span>
</div>

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

4 个答案: