Konservieren Sie das normale Wort, das innerhalb absolut eingestellten Behälters einwickelt

Question

Ich habe einen absolut positionierten Block des Textes innerhalb eines verhältnismäßig positionierten Behälters. Das absolut positionierte Element überschreitet die rechte Begrenzung seines Containers.

Das Problem ist: der Text wickelt sich nicht wie normal; es ist zu früh und nicht zu brechen, als sein max-width definiert erweitert:

Beobachtet Verhalten:

gewünschtes Verhalten

HTML/CSS (012.):

<style> 
.container { 
    position: relative; 
    width: 300px; 
    background: #ccc; 
    height: 100px; 
} 

.text { 
    position: absolute; 
    max-width: 150px; 
    left: 290px; 
    top: 10px; 
    background: lightblue; 
} 
</style> 

<div class="container"> 
    <div class="text">Lorem ipsum dolor sit amet</div> 
</div> 

Hinweis: Ein paar Änderungen, die das gewünschte Verhalten zu erreichen scheinen, die aber nicht ganz das, was ich suche, sind:

• min-width: 150px auf .text definieren (die Text könnte nur ein Wort sein, und ich möchte nicht, dass der Container übergroß wird)
• Positionierung .text. Versuchen

Answer 1

relativ zu dokumentieren, anstatt zu .container (es braucht neben den Behälter erscheinen, auch wenn der Browser geändert wird) mit position: relative; auf .text

EDIT: Auch legt es in einem absoluten positionierter Wrapper mit Ihrem benutzerdefinierten max-width

CSS

.container { 
    position: relative; 
    width: 300px; 
    background: #ccc; 
    height: 300px; 
} 

.wrap_text { 
    position: absolute; 
    max-width: 200px; 
    top: 10px; 
} 

.text { 
    position: relative; 
    left: 290px; 
    background: lightblue; 
} 

Und HTML:

<div class="container"> 
    <div class="wrap_text"> 
     <div class="text"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </div> 
    </div> 
</div> 

Answer 2

Änderung der Absolutposition relativ, und wickeln .text in absolut positioniertes Element.

http://jsfiddle.net/WmcjM/4/

.container { 
    position: relative; 
    width: 300px; 
    background: #ccc; 
    height: 300px; 
} 

.text { 
    position: relative; 
    /*min-width: 200px;*/ 
    left: 290px; 
    background: lightblue; 
} 

.wrap { 
    position: absolute; 
    max-width: 200px; 
    top: 10px; 
}