Zeilenumbruch zwischen zwei display:inline-block vermeiden

[dave]

Hi,

ich habe mehrere Listenelemente mit festen breiten.
Diese sollen nebeneinander stehen:

+----------------++-------++-------+
| listenelement 0|| le 1  || le 2  |
+----------------++-------++-------+

Das habe ich mit display:inline-block erreicht.
Wenn der Viewport nun aber nicht breit genug ist brechen die Listenpunkte um:

/-----------Viewport----------\ +----------------++-------+
| listenelement 0|| le 1  |
+----------------++-------+
+-------+
| le 2  |
+-------+

Was prinzipiell auch in Ordnung ist, nur möchte ich hier nicht zwischen 1 und 2 den Umbruch haben, sondern zwischen 0 und 1.

Dacht ich mir: "Kein Problem, CSS zu Hilfe!"
Ich gebe dem Listenelement 1 ein Pseudo-Element mit einem 'ZERO WIDTH NO-BREAK SPACE' (U+FEFF):
le1:after {
    content:"\FEFF";
}​

Das funktioniert nicht.

Ich habe auch noch 'WORD JOINER' (U+2060), 'ZERO WIDTH JOINER' (U+200D) und sogar, obwohl ich gar kein Leerzeichen dazwischen haben will, 'NO-BREAK SPACE' (U+00A0) ausprobiert.

Kein Erfolg.

Ich denke ich hatte keinen Erfolg weil after- und before-Pseudoelemente nicht vor dem Element sondern als letztes respektive erstes IN diesem Element gerendert werden.

Also habe ich ausprobiert was passiert wenn ich in den HTML-Code zwischen diese beiden Element eins der oben genannten Zeichen setze: Es wird trotzdem an dieser Stelle umgebrochen.

Leider fällt mir nun nichts anderes ein, außer diese beiden Element in einen Container zu packen mit white-space:nowrap;
Diese Lösung gefällt mir nicht, da die beiden Elemente semantisch nichts miteinander zu tun haben.
Bevor ich das jetzt mache weil mir nichts anderes übrig bleibt wollte ich hier mal nachfragen :-)

Jemand eine Idee?

~dave