使Div尽可能宽

Question

为了解释我的问题,我试图使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中做到这一点？注意我不想设置最大宽度,因为这只会使它再次成为静态大小,因为文本的主体总是足以达到最大宽度.我也不能手动打破身体,因为它是动态生成的.

Answer 1

这是(jsFiddle)你想要完成的事情吗？

我刚刚添加display: table;到.box的CSS中.这会将主div扩展为标题范围的宽度,但会包装文本范围.

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