logo标签列表

如何使文本在div上下自动换行？

htmlcsslayoutcss-float
13

我没有问题让文本环绕一个div，当元素的顶部对齐时，但我不知道如何让文本在div上方和下方换行。

例如，我希望文本在40px的#container宽度内，然后向右环绕它，再次完全宽度。

请在http://jsfiddle.net/cope360/wZw7T/1/查看示例。 我在#inset中添加的上边距是我希望文本换行的位置。这可能吗？

CSS：

#inset {
    width: 100px;
    height: 100px;
    background: gray;
    float: left;
    margin-top: 40px;
}

HTML：

<div id="container">
        <div id="inset">Inset</div>
        This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around.
</div>
容器需要作为HTML中的第一个子元素吗？还是可以将其放置在文本的任何位置？ - Marnix
@Marnix，它可以放置在任何地方。HTML可以以任何方式结构化。我只是尝试制作最简单的示例来显示问题。 - cope360
4个回答
11

这是一个基于moontear的答案和http://www.csstextwrap.com/的解决方案，可以给出我想要的渲染结果。

CSS:

div {
    float: left;
    clear: left;
}

#inset {
    width: 100px;
    height: 100px;
    background: gray;
    margin: 10px 10px 10px 0px;
}

#spacer {
    width: 0px;
    height: 40px;
}

HTML：

<div id="container">
    <div id="spacer"></div>

    <div id="inset">Inset</div>
    This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around. This text should wrap all around. This text  should wrap all around.
</div>

请访问http://jsfiddle.net/cope360/KbFGv/1/查看。

2

问题很简单，但解决方案却不易。您只能使用一个 DIV 将文本围绕在一侧，但您可以使用多个 DIV 来实现文本的环绕。

有图有真相：http://www.csstextwrap.com/ 试试看，你就会明白我所说的“多个div”的意思了。

2
也许不是最理想的解决方案，但如果您将“inset” div放在文本中间而不是顶部，并且去掉顶部边距，它就会像您想要的那样换行。我有点觉得这是一个权宜之计。 示例
2

我曾经遇到同样的问题，但我在 cope360 的答案基础上进行了改进，使其不需要添加额外的标记。下面是一个纯 CSS 实现的 JSFiddle，实现的功能与之前类似。

#inset {
    width: 100px;
    height: 100px;
    background: gray;
    float: left;
    clear:left;
}
#container:before {
    content: " ";
    height: 40px;
    width: 0px;
    float: left;
}
使用纯CSS实现加1，比修改HTML要好得多。不错。 - Matt Tester
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接