CODEWITHSUNDEEP
htmlcssoverflow
John Curry
John Curry

Reputation: 428

wrap child div text inside parent div when child div overflows

Codepen: http://codepen.io/anon/pen/qaVRqw

I'm trying to get the innerDiv to wrap the text before the text extends beyond the parent div. How's the best way to get all the text to show up in the innerDiv but also be wrapped?

I've tried using the following but they aren't quite what I'm looking for:

overflow-wrap: normal;
overflow-wrap: break-word;

I'm having trouble figuring out how to Google this question. I'm guessing there's some sort of negative padding or margin I should add?

I've messed around with the width of the innerDiv but when I change the position it extends beyond the parent unless I overflow, but then the content just disappears.

Edit: Changed Title because my last question that I didn't submit was remembered

Upvotes: 1

Views: 3605

Answers (5)

SomeGuy
SomeGuy

Reputation: 256

Lots of complex answers, but in reality it's the 150px on the left that is causing it to break out, so cancel it with a margin right...

#innerDiv {
    position: relative;
    left: 150px;
    margin-right: 150px; /* add this */
    background: pink;
}

Upvotes: 3

Yuri Pereira
Yuri Pereira

Reputation: 1995

position: relative;
left: 100px;
background: pink;
/* width: 700px; */
width: calc(100% - 100px);

Upvotes: 0

Ryan
Ryan

Reputation: 1226

Add this code to innerDiv to make it fit within the outerDiv, whatever its width.

width: calc(100% - 150px);

(Replace 150px with whatever the left/right offset is of innerDiv)

Upvotes: 1

Georgy Ivanov
Georgy Ivanov

Reputation: 1579

How about adding max-width to #innerDiv? In your example

#innerDiv {
    position: relative;
    left: 150px;
    max-width: calc(100% - 150px);
    background: pink;
}

will do the trick.

Upvotes: 1

Cayman Roe
Cayman Roe

Reputation: 125

Try setting a 'max-width' on the inner div. That will force the text to wrap at a width of your choice.

E.g.

#innerDiv {
  max-width: 200px;
}

Upvotes: 1

Related Questions