在div內顯示段落內容

Question

我有一個寬度動態變化的div。而在div裏面，我想顯示一個段落，但是我的段落一直在脫離div。我該如何解決這個問題？

<div class="wrapper"> 
    <div class="session session_1"> 
    </div> 
    <div class="session session_2"> 
     <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 
    </div> 
</div> 

CSS代碼：

div.wrapper { 
    width: 90%; 
    background: black; 
} 
div.session { 
    display: inline-block; 
    vertical-align: top; 
} 

div.session_1 { 
    width: 60%; 
    height: 100px; 
    background: green; 
} 
div.session_2 { 
    width: 30%; 
    height: 100px; 
    background: red; 
} 

fiddle

Answer 1

你可以嘗試這樣

div.wrapper { 
 
    width: 90%; 
 
    background: black; 
 
} 
 
div.session { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
div.session_1 { 
 
    width: 60%; 
 
    height: 100px; 
 
    background: green; 
 
} 
 
div.session_2 { 
 
    width: 30%; 
 
    height: 100px; 
 
    background: red; 
 
    word-break: break-all; 
 
    word-wrap: break-word; 
 
}

<div class="wrapper"> 
 
    <div class="session session_1"> 
 
    </div> 
 
    <div class="session session_2"> 
 
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 
 
    </div> 
 
</div>

Answer 2

在你的CSS，包含<div>是你的第（即.session_2），加word-wrap: break-word;

例（基於小提琴）：

div.session_2 { 
    width: 30%; 
    height: 100px; 
    background: red; 
    word-wrap: break-word; 
} 

Answer 3

改變CSS作爲

div.session_2 { 

height: 100px; 
background: red; 
overflow-x:auto; 
} 

http://jsfiddle.net/TJGZU/259/