Zachowaj normalne zawijanie słów w całkowicie pozycjonowanym pojemniku

Question

Mam bezwzględnie umieszczony blok tekstu wewnątrz względnie umieszczonego pojemnika. Element pozycjonowany absolutnie przekracza prawą granicę swojego kontenera.

Problem polega na tym, że tekst nie jest normalnie pakowany; to złamanie przedwcześnie zamiast rozszerzenia do jego definicją max-width:

Obserwowane zachowanie:

pożądane zachowanie

HTML/CSS (JSFIDDLE: http://jsfiddle.net/WmcjM/):

<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> 

Uwaga: Kilka zmian, które pojawiają się w celu uzyskania pożądanego zachowania, które jednak nie całkiem to, czego szukam, to:

• definiowania min-width: 150px na .text (the tekst może być jednym słowem, a nie chcę, aby pojemnik był zbyt duży)
• pozycjonowanie .text. w stosunku do dokumentu, a nie do .container (musi pojawić się obok pojemnika, nawet wtedy, gdy przeglądarka jest zmieniany)

Answer 1

Spróbuj użyć position: relative; na .text

EDIT: także umieścić go wewnątrz bezwzględną umieszczony owijki z niestandardowego 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; 
} 

I 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

Zmiana pozycji absolutnej na względne i owinąć .text w całkowicie umieszczony elementu.

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; 
}