html - 具有绝对位置的内联 block 在相对 block 内折叠

Question

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

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

这里有一个 fiddle 供您引用。 http://jsfiddle.net/PmhM3/2/

如您所见，.text block 正在折叠。是否有解决方案来防止它像这样崩溃？

Answer 1

您可以为 .text 类添加此 css

white-space:nowrap