Как сделать перенос текста выше и ниже div?

У меня нет проблем с получением текста для обтекания div, когда вершины элементов выровнены, но я не могу понять, как переносить текст выше и ниже div.

Например, я хочу, чтобы текст был полной шириной # контейнера для 40px, затем оберните его вправо и снова перейдите к полной ширине.

Посмотрите на 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>

Ответ 1

Здесь решение, которое дает рендеринг, который я хочу, основываясь на ответах на 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 s.

Решение лучше слов: http://www.csstextwrap.com/ дайте ему шанс, и вы увидите, что я имею в виду под "несколькими div".

Ответ 3

Возможно, это не идеальное решение, но если вы поместите свой "вставной" div в середине вашего текста, а не вверху и избавитесь от верхнего поля, он будет завершен, как вы этого хотите. Я чувствую, что это клочья. пример

Ответ 4

У меня была такая же проблема, и я построил на cope360 ответ, чтобы иметь что-то, что не связано с добавлением дополнительной разметки. Здесь jsfiddle, который по существу делает то же самое, но с чистым css.

#inset {
    width: 100px;
    height: 100px;
    background: gray;
    float: left;
    clear:left;
}
#container:before {
    content: " ";
    height: 40px;
    width: 0px;
    float: left;
}

Ответ 5

К сожалению, у вас не может быть переноса текста выше и ниже, в настоящее время это ограничение html. Вам нужно будет использовать несколько div и обрезать контент, чтобы он выглядел так, как будто он обертывается.

Вы можете только обернуть его на 1 сторону