Сохранение нормального слова обертывания внутри абсолютно позиционированного контейнера

Question

У меня есть абсолютно позиционированный блок текста внутри относительно позиционированного контейнера. Абсолютно позиционированный элемент превышает правую границу его контейнера.

Проблема в том, что текст не обертывается, как обычно; это преждевременно нарушение, а не расширяется до его определяется max-width:

Наблюдаемое поведение:

Желаемая поведение

HTML/CSS ():

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

Примечание: Пара изменений, которые появляются, чтобы достичь желаемого поведения, но не совсем то, что я ищу, включают в себя:

• определения min-width: 150px на .text (текст может быть просто одним словом, и я не хочу, чтобы контейнер был увеличен)
• позиционирование .text. по отношению к документу, а не к .container (она должна появиться рядом с контейнером, даже когда браузер изменен)

Answer 1

Попробуйте использовать position: relative; на .text

EDIT: Кроме того, положить его в абсолютном позиционированноге обертки с пользовательского максимальной шириной

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

И 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

изменить абсолютную позицию относительно и обернуть .text в абсолютно позиционируемый элемент.

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