为了解释我的问题,我试图使一个足够大的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;展示.