Text Wrapping Around an Absolute Positioned Div

Text Wrapping around an absolute positioned div

Absolute positioning takes the element out of the normal document flow, and therefore it does not interact with the other elements. Perhaps you should revist how to position it using float instead, and ask about it here on Stack Overflow if you get stuck :)

Preserve normal word wrapping inside absolutely positioned container

Try using position: relative; on .text

EDIT: Also put it inside an absolute positioned wrapper with your custom max-width

CSS

.container {
    position: relative;
    width: 300px;
    background: #ccc;
    height: 300px;
}

.wrap_text {
    position: absolute;
    max-width: 200px;
    top: 10px;
}

.text {
    position: relative;
    left: 290px;
    background: lightblue;
}

And HTML:

<div class="container">
    <div class="wrap_text">
        <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</div>

Prevent text from wrapping in an absolute positioned div

You can use the CSS white-space: nowrap; to keep the words from wrapping. But remember the words might run outside of the div this way. You would want to use the CSS overflow: visible; if you want to see the words that go outside of the div.

The words are wrapping because the div isn't big enough hold them all. You could also try using the CSS width: fit-content; to make the div's width responsive to the text inside.

I see in your first question you linked the JSFiddle. If you have another JSFiddle that I could look at I could show you what I mean.

Wrapping text around an absolute positioned element

Pure CSS solution: Add a pseudo-element at the beginning of the container with

div.message:before { content:" "; float:right; width:75px; height:75px; }

http://jsfiddle.net/jdp7E/1/

Won't work in older browsers that don't support generated content, so mainly older IE. For those a padding-right for the container could be used as fallback.

Make text wrap inside an absolutely positioned div

I forked around with @alex's jsfiddle example to illustrate (further) the point he was making.

The text IS wrapping; however, you've set a height. A rigid height will keep the div from expanding, which is what I assume you wanted. The amount of text that wraps and fills the space is greatly going to depend on your line-height, font-size and any other CSS you may have applied to the contents of the container.

In the fiddle I forked, I set font-size:10px; line-height:1 - got 5 wrapping lines of text and the remaining contents are hidden by the height/width parameters you set in you declaration.

http://jsfiddle.net/Kbzga/

word-wrap, white-space, overflow:visible are probably not what you're after unless you don't mind the 44x50 green box with text spilling out of it, or scrollbars. HTH

Wrap text to max-width in an absolute position container

I found a solution, I hope it helps someone, I added an extra container with 200px; width:

<div class="flag">
<div style='width:200px;'>
  <div class="showlist" >
    <div>asdf 4444 555555 666666 7 8 8888 9999 555 444</div>
    <div>4 8 15 16 23 42</div>
    <div>asdf foo bar </div>
  </div>
</div>
</div>

Fiddle: https://jsfiddle.net/m2wr9m06/8/

how to fully wrap an absolute position div with a relative position div?

The simple answer is: no.

When you give an element position: absolute; you take it out of the normal flow of content. If it is the only child of its parent, the parent will have no flow content. It will be empty.

Normally, empty html elements have width and height values of 0 and, in turn, do not take space in the normal flow of content. There are exceptions that can cause an empty element to be rendered, such as being a child of a flex parent that is stretching its children. But at some point along the chain of parents, one of them has to have a set dimension or at least some content (possibly in a sibling chain) that generates some height/width or otherwise they will all be just a big chain of empty elements not being rendered.

Additionally, paddingand border attributes on a child are generating width / height on parent elements, even when the child does not have content.

---

Related Topics