html - 如何防止内联元素换行？

Question

我有看起来像这样的菜单项

<ul>
  <li>Item1<span class="context-trigger"></span></li>
  <li>Item2<span class="context-trigger"></span></li>
  <li>Item3<span class="context-trigger"></span></li>
</ul>

使用 CSS 将上面的内容变成水平菜单，使用 JS 将 [spans] 变成显示上下文菜单的按钮。大概是这样的:

Item1^  Item2^  Item3^

如果菜单对于浏览器宽度而言太宽，它会换行，这正是我想要的。问题是有时它会在 [spans] 之前插入换行符。我只希望它在 [li] 之间中断。有什么想法吗？

Answer 1

尝试使用

white-space: nowrap;

在上下文触发类的 css 定义中。

编辑:不过我认为 patmortech 是正确的，将 nowrap 放在跨度上不起作用，因为没有“空白”内容。也可能是将样式粘贴在 LI 元素上也不起作用，因为浏览器可能会分解这些部分，因为 span 是 li 中的嵌套元素。您可能会重新考虑您的代码，删除 SPAN 元素并在 LI 元素上使用 css。