如何制作这个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;
}

看起来像：

如果我缩小窗口最终，“details”div将换行到下一行：

我想要发生的是“title”div中的文本换行到下一行，但同时保留“title”和“details”（不包装）。

类似的东西：

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

Answer 2

使用展示位置显示：http://jsfiddle.net/3nBDd/15/

.caption {
    display:table;
    width:100%;
}
.title {
    display:table-cell;
    text-align: left;
}
.details {
    display:table-cell;
    text-align right;
}

Answer 3

更新您的div标题，如下所示，它将包装文本。

.title
{
    float: left;
    width: 100px; //or whatever you want
}

或

.title
{
    float: left;
    width: 20%; //or whatever you want
}