Подгонка вложенного текста внутри div

У меня есть (левый) div, ширина которого установлена ​​​​на 30% от родительского элемента. Внутри этого div у меня есть абзац, который игнорирует поля столбца. Как сделать так, чтобы текст был обернут внутри родительского div (контейнера)?

css

body {
    margin:0;
    padding:0;
    border:0;
    background-image:url(../img/Background.png);

}   

#container {
    width:960px;
    border:2px solid red;
    margin:auto;
}

#header {

    margin-top:10%;
    border: 1px solid green;
    height:150px;
    background: #000;

}


ul {
    list-style:none;
}

li {
    font-size:1.5em;
    display:inline-block;
    float:right;
    margin: 40px;
    color:white;
    }

img {
    border: 1px solid #39C;
}

.left {
    width:30%;
    height:500px;
    border: 1px solid #93F;
}

.left p {

}

и html

<body>
<div id = container>
<div id = header>
<img src="img/firma.png" width="231" height="80"/>
    <ul>
    <li> Home </li>
    <li> Cds  </li>
    <li> Bio  </li>
    <li> Contacts </li>
    </ul>
</div> <!--end of header-->
<div class = "left">
<p> fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo     </p>
</div>  <!--end of left-->
</div> <!--end of container-->
</body>

html alignment css justify
person Community    schedule 08.09.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Добавьте правило CSS word-wrap:break-word в свой класс .left:

.left {
    width:30%;
    height:500px;
    border: 1px solid #93F;
    word-wrap:break-word;
}

пример jsFiddle

https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

person j08691    schedule 08.09.2013

arrow_upward
0
arrow_downward

Вы можете использовать свойство word-wrap. Пример: http://jsfiddle.net/r7EdS/

.left p {
    word-wrap: break-word;
}
person Krasimir    schedule 08.09.2013