Я новичок в css.
Пожалуйста, помогите мне исправить эту проблему с текстом, который находится в классе абзаца, текст выходит из div.
Я не уверен, что вызывает эту реакцию, потому что есть много всех, у кого есть свой класс или идентификатор.
Меня интересует, что текст, который входит в div-класс = "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;
}
Итак, на .paragraph
вы хотите добавить следующий css:
display: block;
overflow: auto;
Это говорит браузеру о том, чтобы сделать уровень блоков элементов (ов) таким образом, чтобы они вписывались в их родительский элемент и позволяли браузеру определять, что делать с чем-либо, что переполняет контейнер. Вам также потребуется удалить параметр height
если вы хотите, чтобы браузер определял правильную высоту с помощью полосы прокрутки и без нее.
Чтобы обернуть текст вместо переполнения, вам нужно либо удалить пробел: no-wrap из контейнера #wrap, поскольку стиль каскада вниз через дочерние элементы или добавить:
white-space: normal;
и в обоих случаях удалите:
overflow: auto;
из селектора .paragraph
Вот рабочий jsFiddle: http://jsfiddle.net/D7suu/1/
Вот обновленный jsFiddle: http://jsfiddle.net/D7suu/2/