html - 红色边框中的文本不会留在 continut-a div 中

Question

我是 CSS 新手。

请帮我解决段落类中的文本问题，文本超出了 div。

我不确定是什么触发了这种 react ，因为有很多 div 每个人都有他的特定类或 ID。

我感兴趣的是，div class="continut-a"中的文本不会超出 div，而是分解为 div 内的行。

我希望我清楚这一点。

HTML 在这里:

<div id="content" >
    <div id="wrap">

            <div class="leftup"> </div>
            <div class="centerup"> </div>
            <div class="rightup"> </div>
            <div class="clearBoth"> </div>

            <div class="left"> </div>
            <div class="center">

                    <div class="continut-a">
                    <p class="title">Mobile applications</p>
                    <span class="paragraph">On demand of the world evolution, 
                    we can stand and create ideal mobile applications that 
                    will help your customers clearly use your products even 
                    on their smartphones, from everywere!</span>
                    </div>
                    <div class="continut-b">
                    <p class="title">Web designs</p>
                    </div>
                    <div class="continut-c">
                    <p class="title">Custom applications</p>
                    </div>

            </div>
            <div class="right"> </div>
            <div class="clearBoth"> </div>

            <div class="leftdown"> </div>
            <div class="centerdown"> </div>
            <div class="rightdown"> </div>
            <div class="clearBoth"> </div>

        </div>


</div>

还有 CSS:

#content {
width: 85%; 
height: relative; 
margin: 0 auto; 
padding: 0; 
/*float: left;*/ 
position: relative;
border: 1px solid red;
}

#wrap {
width: 99%;
white-space:nowrap;
margin: 0 auto;
padding: 0;
position: relative;
border: 2px solid blue;
}

.leftup{
width: 50px;
height:20px;
float: left;
background-image: url(media/up-left-corner.png);
background-repeat:no-repeat;
background-position:right;
}
.left {
width: 50px;
height: 350px;
float: left;
background-image: url(media/left-margin.png);
background-repeat: repeat-y;
background-position:right;
}
.leftdown {
width: 50px;
height: 35px;
float: left;
background-image:url(media/left-down-corner.png);
background-repeat:no-repeat;
background-position: right, top;

}
.centerup {
float: left;
height:20px;
width: 960px;
position: relative;
background-image:url(media/top-margin.png);
background-repeat:repeat-x;
}
.center {
float: left;
width: 960px;
height: 350px;
position: relative;
background-image:url(media/centerfill.png);
background-repeat:repeat-x, repeat-y;
margin: 0 auto;

}
.centerdown {
height:35px;
float: left;
width: 960px;
position: relative;
background-image: url(media/bottom-margin.png);
background-repeat:repeat-x;

}
.rightup {
width: 50px;
height:20px;
float: left;
background-image: url(media/right-up-corner.png);
background-repeat:no-repeat;
}
.right {
width: 50px;
height: 350px;
float: left;
background-image:url(media/right-margin.png);
background-repeat: repeat-y;
}
.rightdown {
width: 50px;
height:35px;
float: left;
background-image: url(media/right-down-corner.png);
background-repeat:no-repeat;
}

.clearBoth {
clear: both;
}
textarea {
width: 200px;
height: 100px;
resize: none;
}

.continut-a, .continut-b, .continut-c{
    height: 99%;
    min-height: 300px;
    width: 310px;
    border: 1px solid green;
    float: left;
    display: inline-block;
}
.paragraph {
height: 20px;
font-family: Aspergit;
font-size: 10pt;
color: black;
border: 1px solid red;
}
.title{
font-family: Aspergit;
font-size: 15pt;
text-align: center;
font-weight: bold;

}

Answer 1

好的，在 .paragraph 上，您要添加以下 css:

display: block;
overflow: auto;

这告诉浏览器将元素设置为 block 级别，以便它们适合其父级，并让浏览器确定如何处理溢出容器的任何内容。如果您希望浏览器在有和没有滚动条的情况下计算出正确的高度，您还需要删除 height 参数。

要让文本换行而不是溢出，您需要从#wrap 容器中删除空格:no-wrap，因为样式通过子级向下层叠或添加:

white-space: normal;

并且在这两种情况下都删除:

overflow: auto;

来自 .paragraph 选择器

这是一个有效的 jsFiddle:http://jsfiddle.net/D7suu/1/

这是更新后的 jsFiddle:http://jsfiddle.net/D7suu/2/