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

Question

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

所以我的问题是,我怎样才能避免破线？可能我可以用 (无空格字符)替换每个空格,但有不同的方法来实现这一点吗？

Answer 1

你有没有试过李的样式

white-space: nowrap

？

Answer 2

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

li {
   white-space: nowrap;
}

Answer 3

有一个实用的 css 类text-nowrap。您可以在文档的实用程序部分找到它。

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

Answer 4

继MK的回答，引导实用类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>