Html 如何使此div的文本换行？

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

这是一个非常非常长的标题！！！
细节

我将其设计得非常简单：

.container{
最小宽度：200px；
}
.标题{
溢出：隐藏；
}
.头衔{
浮动：左；
}
.详情{
浮动：对；
}
.内容{
高度：200px；
背景色：#C0；
}

这看起来像：

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

我希望将“title”div中的文本换行到下一行，但将“title”和“details”保留在同一行（不换行）

比如：

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

在调整窗口大小时，如果没有足够的空间，则标题仅会自动换行

有人能为我指出实现这一目标的正确方向吗

---

编辑：为了澄清，如果可能的话，我不想为.title指定固定宽度。在大多数情况下，我想让这个div得到它需要的宽度

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

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

或

这应该起作用：

---

在布局中使用“显示”：

---

.title{max width:200px；/*或其他*/}

？是否可以在不指定最大宽度/宽度的情况下执行此操作？我宁愿让宽度达到所需的宽度。在大多数情况下，窗口和标题都相当大。也许一个最小宽度就可以了？出于好奇，你用的是什么浏览器？Mobile Chrome和Mobile Safari如果可能的话，我不想为这个div指定一个固定的宽度。此窗口可以扩展到相当宽的范围，这将切断任意长度的标签。使用百分比，例如

.title{width:40%；}

.details{width:58%；}

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

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

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