Текст в красной рамке не останется в континууме

0

Я новичок в 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;

}
Теги:

1 ответ

0
Лучший ответ

Итак, на .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/

  • 0
    Я не хочу иметь полосу прокрутки, мне нужно, чтобы текст спускался по строкам, как при использовании в NOTEPAD опции переноса слов.
  • 0
    Хорошо, я обновил свой ответ, но вы должны убрать или перефразировать раздел «иметь полосу прокрутки, если он длиннее» вашего вопроса, чтобы быть более понятным.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню