John Curry John Curry - 2 months ago 6
CSS Question

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

Answer

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;
}