絕對位置的文本包裝遵循父項的邊緣

Question

我似乎無法在規範中找到它。

當我使用absolute定位一個元素時，元素內的文本會使該元素只展開直到定位的父元素的邊緣，然後文本會在其中包裝（在Firefox 5中）。

這意味着如果我放置任何東西離開其父母的右邊緣，我的文字會在每個單詞之後換行。

任何人都可以指出我在哪裏描述？

Answer 1

<style type="text/css"> 
 
    #relative 
 
     { 
 
     margin: 0 auto; 
 
     background: #ccc; 
 
     width: 100px; 
 
     height: 100px; 
 
     position: relative 
 
     } 
 

 
    #relative > div 
 
     { 
 
     background: #f0f; 
 
     position: absolute; 
 
     top: 0; 
 
     left: 150px; 
 
     } 
 
    </style> 
 
    <!--...--> 
 
    <div id="relative"> 
 
     <div>text text text</div> 
 
    </div>

設置絕對定位的div來width: 100%;或一個固定值來解決該問題。它在the spec的normal flow部分中有描述。

<style type="text/css"> 
 
    #relative 
 
     { 
 
     margin: 0 auto; 
 
     background: #ccc; 
 
     width: 100px; 
 
     height: 100px; 
 
     position: relative 
 
     } 
 

 
    #relative > div 
 
     { 
 
     background: #f0f; 
 
     position: absolute; 
 
     top: 0; 
 
     left: 150px; 
 
     width: 100%; 
 
     } 
 
    </style> 
 
    <!--...--> 
 
    <div id="relative"> 
 
     <div>text text text</div> 
 
    </div>