将嵌套文本放入 div 中答案

【问题标题】：Fitting nested text inside a div将嵌套文本放入 div 中
【发布时间】：2013-09-12 07:50:29
【问题描述】：

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

【解决方案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

【讨论】：

【解决方案2】：

您可以使用 word-wrap 属性。示例：http://jsfiddle.net/r7EdS/

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

【讨论】：