Question

尝试创建一个包含句子（带空格）的框，最大宽度为300px。当文本太长时，它会在没有滚动条的情况下自动换行。

编辑：

实际上，我应该提到我需要将箱子向左漂浮。我把它放在像这样的小部件中：

<div>
    <div>left control</div>
    <div>text</div>
    <div>right control</div>
</div>

它有效，除非我尝试放置这样的背景：

.rounded-reason {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    background-color:#ffffff;
    padding:10px;
    border: 2px solid red;
    margin-top:7px;
    margin-bottom:20px;
}

背景太小了。如果我不浮动“左控制”和“右控制”，它可以工作，但我希望它们出现在框的顶部，而不是在底部。

Answer 1

它应该这样做。

<div style="width: 300px;">
<p>
Quisque faucibus commodo diam, ut vehicula risus ultrices at? Curabitur tempus eros in velit malesuada sodales? Maecenas auctor nisl quis libero lobortis eget varius eros porta. Nunc mauris lacus, pretium eget viverra semper, rutrum et turpis! Integer viverra sem at odio faucibus at gravida neque consequat. Aenean viverra tellus id felis dapibus bibendum. Integer eget mattis nisl. Nunc nec turpis nec lacus varius sagittis non et sapien! Vestibulum porta ultricies rutrum. Vivamus lorem elit, luctus ac viverra a, porta et nibh. Praesent quam neque, scelerisque non pretium at, suscipit ac quam. Mauris varius ipsum sit amet massa tempus facilisis interdum eros rhoncus. In ac enim et ipsum convallis lacinia.
</p>

</div>

默认情况下，CSS height属性应为auto。因此，如果您没有明确定义高度，它将在高度上增长以填充其内容（前提是内容没有position: absolute或float，这会稍微改变这种行为。

更新

听起来您可能正在遇到有浮动儿童的自动折叠父母。

你可以这样解决......每个人都有自己的优点和缺点。

将overflow: hidden添加到父级。然而，这将切断所有溢出。
在浮动广告下方添加<span style="clear: both;"></span>或类似内容。这增加了一个额外的非语义元素。
浮动父母。这与所有布局不兼容
使用JavaScript或:after CSS伪选择器添加清除元素（不支持JavaScript，不支持IE 6/7）

自动换行具有动态宽度的<div> </div>

1 个答案:

更新