Text goes outside containing div

Question

I have this codepen here, shouldn't the text goes to new line when it reaches the right border of div?

html:

<div class="test">

    <p>dfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodjdfsjiodj</p>
</div>

css:

div.test{
    width:400px;
    height:800px;
    border-style: solid;
    border-color: red;
    margin:1px; padding:1px;

}

Answer 1

Use word-wrap:break-word

div.test{
    width:400px;
    height:800px;
    border-style: solid;
    border-color: red;
    margin:1px; padding:1px;
    word-wrap:break-word;
}