Problem mit white-space nowrap

[automatix]

Hallo zusammen!

Folgender Sachverhalt...

Es gibt einen HTML-Block (.namecontainer), in dem z.B. Namen (Vorname Nachname) aufgelistet werden sollen. Sie werden jeweils in einem eigenen Block dargestellt (.namecontainer span).

[Vorname Nachname 1] [Vorname Nachname 2]
[Vorname Nachname 3]

Um unschöne Zeilenumbrüche mitten im Namen (also zwischen "Vorname" und "Name") zu vermeiden,

[Vorname Nachname 1] [Vorname
Nachname 2] [Vorname Nachname 2]

habe ich den Namensblöcken white-space: nowrap; gegeben. Das Problem ist, dass es nun gar keine Zeilenumbrücke gibt, auch zwischen den Namensblöcken nicht -- alles wird in einer Zeile dargestellt und läuft über die Grenzen des Containers.

[Vorname Nachname 1] [Vorname Nachname 2] [Vorname Nachname 3]

.namecontainer {
	/*background: #9999cc;*/
	float: left;
	width: 50%;
	font-size: 80%;
	line-height: 200%;
}
.namecontainer span {
	background: #ff9900;
	padding: 2px 5px;
	margin: 0 5px;
	line-height: 200%;
	white-space: nowrap;
}

<div class="namecontainer">
    <span class="name">Vorname Nachname 1</span>
    <span class="name">Vorname Nachname 2</span>
    <span class="name">Vorname Nachname 3</span>
</div>

Jemand einen Tipp?..

Danke

[webxvideo]

Eigentlich sieht das alles gut aus.
Allerdings ist die Frage worauf sich die 50% Breite im namecontainer beziehen.
Wie breit ist der übergeordnete Container von namecontainer?

Versuch doch testweise mal die Breite in Pixeln anzugeben (z.B. 200px).

Ansonsten kannst Du auch mit geschützten Leerzeichen arbeiten. Das sähe dann so aus:

<div class="namecontainer">
    Vorname&nbsp;Nachname&nbsp;1 Vorname&nbsp;Nachname&nbsp;2 Vorname&nbsp;Nachname&nbsp;3
</div>

[automatix]

Gelöst. Es lag am Whitespace zwischen den SPAN-Tags... D.h. das

<div class="namecontainer">
    <span class="name">Vorname Nachname 1</span>
    <span class="name">Vorname Nachname 2</span>
    <span class="name">Vorname Nachname 3</span>
</div>

funktioniert und das

<div class="namecontainer">
    <span class="name">Vorname Nachname 1</span><span class="name">Vorname Nachname 2</span><span class="name">Vorname Nachname 3</span>
</div>

nicht.

(FF 3.6.13, IE 8.0.7600.16385, Chrome 8.0.552.224)