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

[Gunnar Bittersmann]

@@dave:

nuqneH

ich habe mehrere Listenelemente mit festen breiten.

Das vereinfacht die Sache.

Jemand eine Idee?

Media queries.

Qapla'

[dave]

Hi,

Jemand eine Idee?

Media queries.

Und wie könnte ich dann vor/nach einem Element einen Zeilenumbruch erzwingen?

Media queries alleine helfen mir aber glaube ich nicht. Das Ganze ist in einem Container, daneben ist noch einer mit variabler, vom Anwender definierter Breite.
Als Variabel weil sie der Anwender definiert, danach steht style="width:Xpx" drin, dann ist sie fest :D

/---------------Viewport--------------------\ +---------------------------++--------------+
|   hier ist die liste      || def. breite  |
+---------------------------++--------------+

Bei kleinerem Viewport:

/---------------Viewport---------------\ +----------------------++--------------+
| hier ist die liste   || def. breite  |
+----------------------++--------------+

Nach kleiner ziehen der Spalte:

/---------------Viewport---------------\ +-------------------------++-----------+
|   hier ist die liste    ||def. breite|
+-------------------------++-----------+

Ich sehe keine Möglichkeit im CSS zu wissen wie breit die linke Spalte ist.

~dave

[Gunnar Bittersmann]

@@dave:

nuqneH

Und wie könnte ich dann vor/nach einem Element einen Zeilenumbruch erzwingen?

Das erste 'li' auf 'display: block' setzen.

Media queries alleine helfen mir aber glaube ich nicht. Das Ganze ist in einem Container, daneben ist noch einer mit variabler, vom Anwender definierter Breite.

Ähm ja, das verkompliziert die Sache.

Qapla'

[dave]

Hi,

hast du eigentlich eine Erklärung dafür warum meine Versuche mit :after und den Unicodezeichen nicht funktionieren?

Und warum sogar bei diesem Code der Umbruch an der falschen stelle ist:

<div class="container">  
    <div class="foobar"></div  
    ><div class="foo"></div  
    >&nbsp;<div class="bar"></div>  
</div>​

.container {  
    width:9em;  
}  
.container div {  
    display:inline-block;  
    width:3em;  
    background:orange;  
    height:2em;  
}  
.container div.foobar {  
    width:6em;  
background:lightblue;  
}​

~dave

[Gunnar Bittersmann]

@@dave:

nuqneH

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.

Das Problem ist das Whitespace zwischen </li> und <li>.

So geht’s:

<ul>  
  <li>listenelement 0</li>  
  <li>le 1</li><li>le 2</li>  
</ul>

Qapla'

[dave]

Hi,

Das Problem ist das Whitespace zwischen </li> und <li>.

Ich habe keine Whitespaces dazwischen.

So geht’s:

<ul>

<li>listenelement 0</li>
  <li>le 1</li><li>le 2</li>
</ul>

  
So habe ich das Problem, dass ich einen Abstand zwischen 0 und 1 habe wenn alle in eine Zeile passen.  
  
Außerdem geht das glaub ich auch nur in dem Fall, in dem das Leerzeichen genug Platz wegnimmt sodass das le1 keinen Platz mehr hat.  
  
[Wie in diesem Beispiel zu sehen](http://jsfiddle.net/jCSpa/2/) geht's erstmal, wenn man die containerbreite aber auf 10em ändert bricht es wieder falsch um.  
  
~dave