在絕對定位的容器內部保留正常的單詞包裝

Question

我在相對定位的容器內有絕對定位的文本塊。絕對定位的元素超出了其容器的右邊界。

問題是：文本不像平常一樣包裝;它打破過早，而不是擴大它的定義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> 

注：出現達到預期的行爲，但不完全是我正在尋找一對夫婦的變化，包括：

• 上.text定義min-width: 150px（中文本可能只是一個字，我不想對容器進行過大）
• 定位.text。相對於文檔，而不是.container（它需要出現在容器旁的，即使在瀏覽器大小）

Answer 1

試穿的.text

編輯使用position: relative;：也把它的絕對定位的包裝內與您的自定義最大寬度

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