0

我有一个相对块，我需要从中放置一个动态文本。

<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 块正在折叠。有没有办法防止它像这样崩溃？

4

2 回答 2

2

您可以为 .text 类添加此 css

white-space:nowrap
于 2013-10-03T07:40:14.210 回答
1

这对你有用。

你所要做的就是改变它的显示属性。

.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

参考：网络

于 2013-10-03T07:29:20.213 回答