Текст выходит за границы блока див

@light_girlz · Регистрация: 13.03.2013

Author24 — интернет-сервис помощи студентам

Подскажите, как мне справиться с этой ситуацией, текст выходит за границы дива.. Использую перенос word-wrap:break-word, но на это никакой реакции нет...

@snaipi91 · 11.03.2014, 20:50

Задайте ширину блоку в котором находится текст чтобы он не выходил за границы

@light_girlz · 11.03.2014, 20:58 **[ТС]**

Вот html блока новостного

PHP/HTML

<div class="load_box">
 <div class="load_box_in">
<?if($MODER_PANEL$)?>
<div style="float:right">$MODER_PANEL$</div><?endif?>
 <div class="load_box_title">
 <div class="load_box_title_t">
 <a href="$ENTRY_URL$">$TITLE$</a>
 </div>
 </div>
 <div class="load_box_mess">
 <?if(len($MESSAGE$)>160)?><?substr($MESSAGE$,0,160)?>...<?else?>$MESSAGE$<?endif?>
 </div>
 </div>
</div>

а вот css

CSS

.load_box {background:#fff;width:45%;float:left;border:1px solid #e9e9e9;padding:2px; display:inline; margin:5px 7px 5px 20px; }
.load_box_in {background:#fbfbfb;height:172px;}
.load_box_title {background:#71b8c9 repeat; height:40px; display:block; width:100%; }
.load_box_title_t {padding:7px 30px; width:100%;  word-wrap:break-word;}
.load_box_title a {font-size:11px;font-family:tahoma;font-weight:700;text-shadow:1px 1px 0px #7298a5;color:#fff;text-decoration:none; }
.load_box_title a:hover {color:#f3f3f3;}
.load_box_mess {text-align:justify;font-size:11px;font-family:tahoma;color:#9c9c9c;margin:8px 10px 0px 0px;}

Там задана ширина в 100% или именно из-за процентного соотношения не происходит перенос? но иначе никак не сделать вывод новостей в две колонки на юкозе не используя ширину в процентах..

@snaipi91 · 11.03.2014, 21:11

Процентная ширина 100% задаётся от ширины родительского блока допустим

HTML5

1
2
3

<div class="wrap-block">
    <div class="block">text text text</div>
</div>

CSS

.wrap-block {
     width: 700px;
}
 
.block {
    width: 50%;
}

класс .block будет равнятся 350 px;

@light_girlz · 11.03.2014, 21:38 **[ТС]**

Сделала фиксированную ширину, спасибо за объяснение, но однако переноса нет, посмотрела в хроме опере, так же как на картинке, в мозиле все как надо... В чем может быть причина, не подскажите?

@BigProgrammer · 11.03.2014, 21:44

Сообщение от light_girlz

Сделала фиксированную ширину, спасибо за объяснение, но однако переноса нет, посмотрела в хроме опере, так же как на картинке, в мозиле все как надо... В чем может быть причина, не подскажите?

Можете дать ссылку на страницу?

@light_girlz · 11.03.2014, 21:51 **[ТС]**

Вот ссылка: http://gubkinz.3dn.ru/

@BigProgrammer · 11.03.2014, 22:02

Это просходит потому, что у блока .load_box_title_t ширина задана такая же, как и в родительском блоке .load_box_title, и задана набивка как 30px. Поэтому этот блок вылазит за пределы родителя.
Вы можете использовать средства разработчика в браузере, чтобы посмотреть границы блоков.

@snaipi91 · 11.03.2014, 22:06

CSS

1
2
3

.load_box_title_t {
   width: auto;
}

либо вообще не прописывайте width

@light_girlz · 11.03.2014, 22:13 **[ТС]**

спасибо огромное за помощь, убрала вообще ширину оттуда

@Academik · 15.03.2014, 19:55

light_girlz, это потому что вы указали стопроцентную ширину совместно с паддингом. В итоге вы получили ширину блока 100% + 60px.

CSS

1	.load_box_title_t {padding:7px 30px; width:100%; word-wrap:break-word;}

Уберите ширину и проблема исчезнет.

@Denii · 17.03.2019, 00:10

Ответ прост , без замудрений . Что бы текст не съезжал из блоков досточно будет задать фиксированое значение вашей страницы.
например:

CSS

 body{
margin:1200px;
hight:1vh;
}

@mrtoxas · 17.03.2019, 00:56

Denii, margin:1200px; ?

@light_girlz 13 / 13 / 24 Регистрация: 13.03.2013 Сообщений: 103
		1
	Текст выходит за границы блока див 11.03.2014, 20:47. Показов 94931. Ответов 12 Метки нет (Все метки) Подскажите, как мне справиться с этой ситуацией, текст выходит за границы дива.. Использую перенос word-wrap:break-word, но на это никакой реакции нет... 0

@snaipi91 6 / 6 / 1 Регистрация: 29.01.2014 Сообщений: 51
	11.03.2014, 20:50	2
	Задайте ширину блоку в котором находится текст чтобы он не выходил за границы 1

@light_girlz 13 / 13 / 24 Регистрация: 13.03.2013 Сообщений: 103
	11.03.2014, 21:38 [ТС]	5
	Сделала фиксированную ширину, спасибо за объяснение, но однако переноса нет, посмотрела в хроме опере, так же как на картинке, в мозиле все как надо... В чем может быть причина, не подскажите? 0

@BigProgrammer 38 / 38 / 8 Регистрация: 20.07.2013 Сообщений: 105
	11.03.2014, 21:44	6
	Сообщение от light_girlz Сделала фиксированную ширину, спасибо за объяснение, но однако переноса нет, посмотрела в хроме опере, так же как на картинке, в мозиле все как надо... В чем может быть причина, не подскажите? Можете дать ссылку на страницу? 1

@light_girlz 13 / 13 / 24 Регистрация: 13.03.2013 Сообщений: 103
	11.03.2014, 21:51 [ТС]	7
	Вот ссылка: http://gubkinz.3dn.ru/ 0

@BigProgrammer 38 / 38 / 8 Регистрация: 20.07.2013 Сообщений: 105
	11.03.2014, 22:02	8
	Это просходит потому, что у блока .load_box_title_t ширина задана такая же, как и в родительском блоке .load_box_title, и задана набивка как 30px. Поэтому этот блок вылазит за пределы родителя. Вы можете использовать средства разработчика в браузере, чтобы посмотреть границы блоков. 1

@light_girlz 13 / 13 / 24 Регистрация: 13.03.2013 Сообщений: 103
	11.03.2014, 22:13 [ТС]	10
	спасибо огромное за помощь, убрала вообще ширину оттуда 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	17.03.2019, 00:56	13
	Denii, `margin:1200px;` ? 1

Текст выходит за границы блока див

Решение