html - 我怎样才能使这个 div 的文本换行？

Question

我有一个简单的 HTML 结构，如下所示:

<div class="container">
    <div class="caption">
        <div class="title">This is a very, very long title!!!</div>
        <div class="details">Details</div>
    </div>
    <div class="content"></div>
</div>

我的样式非常简单:

.container {
    min-width: 200px;
}
.caption {
    overflow: hidden;
}
.title {
    float: left;
}
.details {
    float: right;
}
.content {
    height: 200px;
    background-color: #c0c0c0;
}

看起来像:

如果我将窗口缩小得足够多，最终“详细信息”div 将换行到下一行:

我希望发生的是“标题”div 内的文本换行到下一行，但将“标题”和“详细信息”保持在同一行(不换行)。

类似于:

This is a very, very         Details
long title!!!
+----------------------------------+

只有在窗口大小调整时没有足够空间时标题才会换行。

谁能指出我实现这一目标的正确方向？

Here is a jsFiddle of the above code if anyone is interested.

编辑:澄清一下，如果可能的话，我不想为 .title 指定固定宽度。在大多数情况下，我想让这个 div 变得尽可能宽。

Answer 1

这应该有效:

http://jsfiddle.net/KV8UW/

<div class="container">
<div class="caption">
    <div class="details">Details</div>
    <div class="title">This is a very, very long title!!!</div>
</div>
<div class="content"></div>

.container {
    min-width: 200px;
}
.caption {
    overflow: hidden;
}
.details {
    float: right;
}
.content {
    height: 200px;
    background-color: #c0c0c0;
}