Как избежать текста, превышающего пределы ширины DIV

Question

У меня есть структура родительского div, которая использует «display: inline-block» и «position: absolute». Это важно и не может быть изменено!

Но .. В плавающем левом div моего ребенка мой текст превышает его ширину.

Как я могу избежать такого поведения?

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> 

Answer 1

Эта проблема здесь в том, что вы установили white-space: nowrap; на #main. Это унаследовано вашим тегом p и заставляет текст не переносить.

Установка white-space на что-то вроде normal заставит текст обернуть, как вы ожидали.

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

Answer 2

white-space: nowrap; Удалить из #main

Answer 3

Вы можете использовать white-space: normal;, Это будет обернуть текст в следующей строке.

Вашего код должен выглядеть следующим образом:

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

Надеется, что это помогает!