Nur Text in neue Zeile umbrechen, wenn die maximale Breite erreicht ist?

Question

Ich habe eine einfache div wie folgt aus:

<div id="containerDIV"> 
    <div>THIS IS SOME TEXT</div> 
</div> 
... 
#containerDIV { 
    max-width:200px; 
} 

jedoch, wenn der Code ausgeführt wird, wird der Text zeigt, wie diese auf der Seite nach oben:

THIS IS 
SOME TEXT 

Warum ist das passiert? Obwohl der Text nicht die maximale Breite erreicht hat, scheint er in eine neue Zeile zu springen. Wie kann ich den Text zwingen, in einer einzigen Zeile zu sein, bis er die maximale Breite erreicht, und dann zur nächsten Zeile übergehen?

Hier ist eine Geige umreißt das Problem: http://jsfiddle.net/v2p2xvjh/1/

Ich versuchte, die min-Breite zu setzen, wie vorgeschlagen, aber das wird seltsam aussehen, wenn ein kurzer Text in dem Feld angezeigt wird. Da der Container div jetzt zu breit für den Kurztext ist.

Answer 1

UPDATE # 1

Da Sie mit "position: absolute". Dadurch wird die Breite der div-Datei auf 0 px gesetzt, wenn keine Breite definiert ist. Die maximale Breite: 200px erlaubt alles zwischen 0px und 200px. Wenn Sie min-width: 200px verwenden, erlauben Sie 200px bis unendlich px. Hier

ist jsFiddle: http://jsfiddle.net/v2p2xvjh/2/

OLD

Das Problem scheint mit der Schriftgröße oder Schriftart-Familie zu sein, die Sie verwenden. Es kann auch betroffen sein, wenn die Breite des übergeordneten Elements kleiner als 200 Pixel ist.

Testing dies auf jsFiddle funktioniert es wie erwartet: https://jsfiddle.net/0wg3hodx/1/

<div id="containerDIV"> 
    <div>THIS IS SOME TEXT</div> 
</div> 

#containerDIV { 
    max-width:200px; 
} 

Dies liegt daran, genügend Platz vorhanden ist für sie max-width zu erreichen: 200px.

Sie müssen sich das CSS (width/padding/margin/font) der umgebenden Elemente ansehen, um das Problem zu beheben.