こんな感じのメニューがあります
<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 を使用します。漠然とこのように:
アイテム1^ アイテム2^ アイテム3^
メニューがブラウザの幅に対して広すぎる場合は、折り返されます。これは私が望んでいることです。問題は、[spans] の前に改行を入れている場合があることです。[li] の間で区切りたいだけです。何か案は？
使ってみて
white-space: nowrap;
context-trigger クラスの css 定義で。
編集: patmortech は正しいと思いますが、「空白」コンテンツがないため、スパンに nowrap を配置しても機能しません。また、LI 要素にスタイルを適用しても機能しない可能性があります。これは、スパンが li のネストされた要素であるため、ブラウザーがパーツを分割する可能性があるためです。コードを再考し、SPAN 要素を削除して、LI 要素で css を使用することもできます。
リスト項目がラップされないようにするには、次のものを配置する必要があります (コンテキスト トリガー クラスに配置すると、スパン コンテンツがラップされないようになります)。
li { white-space:nowrap; }
要素をフロートする<li>と、必要な効果が得られるはずです。