0

我有一个（左）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>
4

2 回答 2

1

将 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

于 2013-09-08T19:36:05.077 回答
0

您可以使用自动换行属性。示例：http: //jsfiddle.net/r7EdS/

.left p {
    word-wrap: break-word;
}
于 2013-09-08T19:37:33.420 回答