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!!!
+----------------------------------+

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

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

如果有人感兴趣，这里是上述代码的 jsFiddle。

编辑：为了澄清，如果可能，我不想为 .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
}