<p>I've got menu items that look like this</p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;Item1&lt;span class="context-trigger"&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;Item2&lt;span class="context-trigger"&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;Item3&lt;span class="context-trigger"&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>with CSS that turns the above into a horizontal menu, and JS that turns the [spans] into buttons that bring up contextual menus. Vaguely like this:</p>

<pre>
Item1^  Item2^  Item3^
</pre>

<p>If the menu gets too wide for the browser width, it wraps, which is what I want. The problem is that sometimes it's putting in line-breaks before the [spans]. I only want it to break between [li]s. Any ideas?</p>

try using
```
```
white-space: nowrap;
```
```
in the css definition of your context-trigger class.
Edit: I think patmortech is correct though, putting nowrap on the span does not work, because there is no "white space" content. It might also be that sticking the style on the LI element does not work either, because the browser might breakup the parts because the span is a nested element in li. You might reconsider your code, drop the SPAN element and use css on the LI elements.