在div中显示段落内容

Question

I have a div that has a width changes dynamically. And inside the div, I want to display a paragraph but my paragraph keep getting out of the div. How can I fix that problem?

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

CSS CODE:

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

you can try like this

 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

On your CSS, the <div> that contains your paragraph (that is .session_2 ), add word-wrap: break-word;

Example (based on fiddle):

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

Answer 3

change css as

div.session_2 {

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

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