Russel Riehle Russel Riehle - 28 days ago 9
CSS Question

How can I avoid text that is exceeding DIV's width limits

I have a parent div structure that uses "display: inline-block" and "position:absolute". This is !important and cannot be changed!

But.. In child's floated left div, my text is exceeding its width.

How can I avoid this behavior?

FIDDLE: https://jsfiddle.net/s8a818vw/

CSS:

#main {
width:100%;
height:400px;
overflow: hidden;
white-space: nowrap;
background:pink;
}

.sub {
width:600px;
display: inline-block;
height:400px;
position:absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}

.sub-text {
width:70%;
height:100%;
float:left;
background:lime;
overflow: none;
}

.sub-img {
width:30%;
height:100%;
float:right;
background:red;
display:flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: flex-end;
align-items: center;
}


HTML:

<div id="main">

<div class="sub">

<div class="sub-text">

<h1>Header</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet tellus vitae nisi feugiat malesuada. Phasellus semper vehicula ante. Pellentesque ut finibus nisl. Cras tempus, eros ut aliquam mollis, metus diam efficitur neque, non pellentesque eros mi a felis. In lectus ipsum, rutrum at risus eget, faucibus sodales ipsum. Nam vel interdum libero. Donec ac lacus interdum, rutrum neque sit amet, vestibulum tellus.</p>

<a href="#">My Link</a>

</div>

<div class="sub-img">img 1</div>

</div>

</div>

ajm ajm
Answer

This issue here is that you've set white-space: nowrap; on #main. That's being inherited by your p tag and causing the text not to wrap.

Setting white-space to something like normal will cause the text to wrap as you'd expect.

.sub-text{
    white-space: normal;
}