絕對位置的內聯塊在相對塊內摺疊

Question

我有一個相對塊，我需要從它上面放置一個動態文本。

<div class='wrap'> 
<div class='text'>This text...</div> 
</div> 

.wrap{ 
width: 300px; 
height: 20px; 
background-color: #e3e3e3; 
position: relative; 
margin-bottom: 60px 
} 

.text{ 
background: #27818d; 
color: #fff; 
display: inline; 
position: absolute; 
left: 312px; 
} 

這是一個小提琴讓你有一個想法。 http://jsfiddle.net/PmhM3/2/

如您所見，.text塊正在崩潰。有沒有解決方案來防止它像這樣崩潰？

Answer 1

您可以添加這個CSS的的.text類

white-space:nowrap 

Answer 2

This將爲您工作。

您只需更改其顯示屬性即可。

.text{ 
background: #27818d; 
color: #fff; 
display: table; 
position: absolute; 
left: 312px; 
} 

下面是顯示性能之間進行比較

inline   Default. Displays an element as an inline element (like <span>) 
block   Displays an element as a block element (like <p>) 
inline-block  Displays an element as an inline-level block container. The inside   
        of this block is formatted as block-level box, and the element 
        itself is formatted as an inline-level box 
inline-table  The element is displayed as an inline-level table  
list-item   Let the element behave like a <li> element. 
run-in   Displays an element as either block or inline, depending on context 
table   Let the element behave like a <table> element  
table-caption Let the element behave like a <caption> element 
table-column-group Let the element behave like a <colgroup> element  
table-header-group Let the element behave like a <thead> element 
table-footer-group Let the element behave like a <tfoot> element 
table-row-group Let the element behave like a <tbody> element 
table-cell   Let the element behave like a <td> element 
table-column Let the element behave like a <col> element 
table-row   Let the element behave like a <tr> element 
none   The element will not be displayed at all (has no effect on layout) 
inherit   The value of the display property will be inherited from the parent 
        element 

參考圖表：WEB