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

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

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

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

Answer 2

一个有效的jQuery示例：

http://jsfiddle.net/8AFcv/

$(function() {
    $(".box").width($(".title").width());
})

Answer 3

对于标题，您应该使用<hN>代码（<h1>，<h2>等）。

没有文字换行：

white-space: nowrap;

在你不想包装的文本元素上。

<强> Working Example on jsFiddle

Answer 4

如果我理解你的正确，你可以使用JS或jQuery轻松地为你的文本设置相同的宽度，例如：

$('.text').width($('.title').width())

并在jQuery（document）.ready或者事件中运行它，如果你动态添加它

Answer 5

除非由显式宽度或高度指定，否则块内容（如div）会扩展到内容推送它们。

如果没有在div上设置max-width，则不太可能使用纯CSS解决方案。

CSS上的指针：

不要在您的选择器中包含标签（即tag.class），因为您必须将该标签与该类一起使用。只需使用.class，您就可以更轻松地更改标记（如果需要），并使您的类可以将其用途扩展到多个标记。

使Div尽可能宽

5 个答案: