html - 背景上的 CSS/HTML 文本

Question

我总是在布局方面遇到一些小麻烦。我需要部分帮助。我真的不知道如何解释，但我会尽力而为，哈哈。

HTML

<div id="details">
<div id="stat_bar">
    <div id='details' style="width:100%">Exp</div>
</div>
<br>
<br>
<div id="stat_bar">
    <div id='details' style="width:100%">Energy 12/12</div>
</div>
<br>
<br>
<div id="stat_bar">
    <div id='details' style="width:80%">Stamina 100%</div>
</div>
<br>
<br>
<div id="stat_bar">
    <div id='details' style="width:100%">Adrenaline 12/12</div>
</div>
<br>
<br>
<div id="stat_bar">
    <div id='details' style="width:10%">Health 10%</div>
</div>
<br>
<br>

这是我的 fiddle http://jsfiddle.net/nay3rv36

如您所见，当宽度较低时，文本会被推到底部。我希望文本保留在框中，但背景要关闭。

Answer 1

元素上的 ID 应该是唯一的。

看看这个:http://jsfiddle.net/js3mptyy/1/

完整的 html/css 更新。

#details #stat_bar div {
    background:#006600;
    height:14px;
    white-space: nowrap;
}

如果您保持 id 不变，将解决您的问题。

添加 white-space: nowrap 将停止文本换行到小 div 中的新行。