Question

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

Answer 1

将CSS规则word-wrap:break-word添加到.left班级：

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

<强> jsFiddle example

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

Answer 2

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

.left p {
    word-wrap: break-word;
}

在div中嵌入嵌套文本

2 个答案: