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

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

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

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

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

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>

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

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

Ответ 1

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

РЕДАКТИРОВАТЬ: Также помещайте его в абсолютную позиционную оболочку с вашей пользовательской максимальной шириной

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>

Ответ 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;
}