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中这样做？注意,我不想设置最大宽度,因为这只是使它再次成为静态大小,因为文本的主体总是足以达到最大宽度.我也不能在动态生成的时候手动断开人体.

解决方法

this (jsFiddle)你想要完成什么？

我刚刚添加了display：table;到.Box的CSS.这将主要的div扩展到标题范围的宽度,但是包装文本跨度.

注意：您还可以设置一个恒定的宽度,以防止div展开到窗口的宽度.这样一来,如果它的宽度大于固定宽度,它仍然会扩展到标题的宽度,但如果用户拖出窗口,它将不会增长.在我的例子中,我添加了width：100px;展示.