如何避免内联元素换行？

Question

我正在建立一个包含水平主菜单和对应垂直子菜单标题的菜单。现在，由于一些较长的菜单标题需要换行。事实上，“sub” UL（无序列表）的宽度与子菜单中最长的单词长度相同，其他菜单项随之换行。我没有为UL或LI（无序列表项）指定任何宽度（无论是主菜单还是子菜单）。

因此，我的问题是，如何避免换行？可能我可以用 （无间隔字符）替换每个空格，但是否还有其他方法可以实现这一点呢？

- Martin

Answer 1

你尝试过使用 CSS 样式化 li 元素吗？

white-space: nowrap

?

- Eifion

Answer 2

添加下面的 CSS 将会防止文本换行：

li {
   white-space: nowrap;
}

- Wayne Austin

Answer 3

如果你正在使用Bootstrap，你可以使用实用的CSS类text-nowrap。你可以在docs的utility部分找到它。

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

- M K

---

请在您的回答中详细说明 - 您的回答是正确的，但如果您提供一个text-nowrap的示例以及如何使用它，那就更完美了。目前为止，您的回答太短了，以至于系统将其放入“低质量审核队列”中。 - Frits

@Frits 当然没问题 - M K

太棒了。好多了。+1 - Frits

Answer 4

进一步阐述M K的答案，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>

- Tom Harris

---

这个引导类 text-nowrap，正好实现了我想要的效果！ - Mohammed Noureldin