css – 使Div与需要一样宽

为了解释我的问题,我试图使一个足够大的div来容纳一个动态生成的标题而不包装它,但是div还有其他内容,我想要包装.

换一种说法：

CSS：

.box {
    min-width:170px;
}

.box span.title {
    font-size:24px;
    white-space: nowrap;
}

.box span.text{
    font-size:10px;
    white-space: normal;
}

HTML：

<div class="box">
   <span class="title">title on one line</span><br />
   <span class="text">This is the main body of text which I want to wrap as
           required and have no effect on the width of the div.</span>
</div>

然而,这是导致div扩展到足够宽,以便将一行文本的主体包含在我想包装的行上.我已经尝试过CSS的各种安排,并将它们全部放在容器div等内容中,但是我似乎无法让这个盒子完全够宽,只能包含标题而不包装(但不要小于最小宽度)

有没有办法在CSS中这样做？注意,我不想设置最大宽度,因为这只是使它再次成为静态大小,因为文本的主体总是足以达到最大宽度.我也不能在动态生成的时候手动断开人体.