Аватар для light_girlz
13 / 13 / 24
Регистрация: 13.03.2013
Сообщений: 103
1

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

11.03.2014, 20:47. Показов 95508. Ответов 12
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Подскажите, как мне справиться с этой ситуацией, текст выходит за границы дива.. Использую перенос word-wrap:break-word, но на это никакой реакции нет...
Текст выходит за границы блока див
0
Лучшие ответы (1)
11.03.2014, 20:47
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
11.03.2014, 20:47
Ответы с готовыми решениями:

Текст в правой колонке выходит за див
Текст выходит за див не переносится в низ. /* CSS Document */ body { margin:0px; padding:0px; font: 1em Verdana, Arial, Helvetica,...

В ie 6 дочерний блок выходит за границы родительского блока
Доброго времени суток! В ie 6 дочерний блок выходит за границы родительского блока,как это можно исправить? <!DOCTYPE HTML...

Текст выходит за границы
У меня проблема текст выходит за определенные рамки как мне его нормально сделать? Пробовал через word-wrap: break-word ничего не...

12
 Аватар для 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, 20:58  [ТС] 3
Вот html блока новостного

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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
1
2
3
4
5
6
7
.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% или именно из-за процентного соотношения не происходит перенос? но иначе никак не сделать вывод новостей в две колонки на юкозе не используя ширину в процентах..
0
 Аватар для snaipi91
6 / 6 / 1
Регистрация: 29.01.2014
Сообщений: 51
11.03.2014, 21:11 4
Процентная ширина 100% задаётся от ширины родительского блока допустим

HTML5
1
2
3
<div class="wrap-block">
    <div class="block">text text text</div>
</div>
CSS
1
2
3
4
5
6
7
.wrap-block {
     width: 700px;
}
 
.block {
    width: 50%;
}
класс .block будет равнятся 350 px;
1
 Аватар для light_girlz
13 / 13 / 24
Регистрация: 13.03.2013
Сообщений: 103
11.03.2014, 21:38  [ТС] 5
Сделала фиксированную ширину, спасибо за объяснение, но однако переноса нет, посмотрела в хроме опере, так же как на картинке, в мозиле все как надо... В чем может быть причина, не подскажите?
0
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
38 / 38 / 8
Регистрация: 20.07.2013
Сообщений: 105
11.03.2014, 22:02 8
Это просходит потому, что у блока .load_box_title_t ширина задана такая же, как и в родительском блоке .load_box_title, и задана набивка как 30px. Поэтому этот блок вылазит за пределы родителя.
Вы можете использовать средства разработчика в браузере, чтобы посмотреть границы блоков.
1
 Аватар для snaipi91
6 / 6 / 1
Регистрация: 29.01.2014
Сообщений: 51
11.03.2014, 22:06 9
Лучший ответ Сообщение было отмечено Taatshi как решение

Решение

CSS
1
2
3
.load_box_title_t {
   width: auto;
}
либо вообще не прописывайте width
1
 Аватар для light_girlz
13 / 13 / 24
Регистрация: 13.03.2013
Сообщений: 103
11.03.2014, 22:13  [ТС] 10
спасибо огромное за помощь, убрала вообще ширину оттуда
0
1030 / 682 / 297
Регистрация: 04.04.2013
Сообщений: 2,748
15.03.2014, 19:55 11
light_girlz, это потому что вы указали стопроцентную ширину совместно с паддингом. В итоге вы получили ширину блока 100% + 60px.
CSS
1
.load_box_title_t {padding:7px 30px; width:100%;  word-wrap:break-word;}
Уберите ширину и проблема исчезнет.
1
0 / 0 / 0
Регистрация: 02.02.2018
Сообщений: 1
17.03.2019, 00:10 12
Ответ прост , без замудрений . Что бы текст не съезжал из блоков досточно будет задать фиксированое значение вашей страницы.
например:
CSS
1
2
3
4
 body{
margin:1200px;
hight:1vh;
}
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
17.03.2019, 00:56 13
Denii, margin:1200px; ?
1
17.03.2019, 00:56
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
17.03.2019, 00:56
Помогаю со студенческими работами здесь

Текст выходит за границы колонок
&lt;div id=&quot;wrapper&quot;&gt; &lt;div id=&quot;articles&quot;&gt; &lt;div id=&quot;about_us&quot;&gt; ...

Текст таблицы выходит за границы
Ребят, такая проблема. Паршу таблицу, а текст вылезает за рамки. Даже задал max-width у td'шек, но это не помогает. Текст все равно за...

Текст выходит из блока
Добрый вечер!!! Есть у меня блок padding: 6px 0px; margin: 12px 8px 8px 8px; width: 165px; float:left; border:...

Текст выходит за пределы блока
Почему текст выходит за пределы блока левого,хочу разместить в левом блоке ссылки а они выходят за пределы,как этого избежать? Мне надо что...

При изменении масштаб текст выходит за пределы блока
Вот есть три дива меню текст по центру и фотка!! При увиличении зума браузере текст тот что по центру(div class=text) вылазит на меню и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
13
Ответ Создать тему

Редактор формул (кликните на картинку в правом углу, чтобы закрыть)
Опции темы

Новые блоги и статьи
Почему могут не шифроваться русские символы в Java
Wired 17.02.2025
При разработке на Java нередко возникают сложности с шифрованием русских символов. Эта проблема особенно актуальна для разработчиков, создающих программное обеспечение для русскоязычной аудитории. . . .
Отличия ОС для x86_64 и ARM
Wired 17.02.2025
На данный момент сосуществуют две основные архитектуры процессоров - x86_64 и ARM. Эти архитектуры имеют принципиально разные подходы к организации вычислений и обработке данных, что накладывает. . .
Многопоточность в Python: как использовать Thread
bytestream 17.02.2025
Поток выполнения (thread) - это наименьшая последовательность инструкций, которая может управляться планировщиком операционной системы. Представьте себе, что ваша программа - это книга, а потоки -. . .
Как воспроизвести Race Condition в Python
bytestream 17.02.2025
В многопоточном программировании существует множество подводных камней, и одним из самых коварных является состояние гонки (Race Condition). Этот термин описывает ситуацию, когда результат выполнения. . .
Ошибка "node: --openssl-legacy-provider is not allowed in NODE_OPTIONS"
bytestream 17.02.2025
Каждый разработчик рано или поздно сталкивается с ситуацией, когда при запуске проекта Node. js неожиданно выскакивает ошибка "node: --openssl-legacy-provider is not allowed in NODE_OPTIONS". Это. . .
Ошибка pip Python "AttributeError­: module 'lib' has no attribute 'OpenSSL_add_al­l_algorit­hms'"
bytestream 17.02.2025
При разработке на Python частенько сталкиваешься с разными сюрпризами, но ошибка AttributeError: module 'lib' has no attribute 'OpenSSL_add_all_algorithms' - это что-то особенное. Знаете, это как. . .
Сообщение Play Store "You must complete the advertising ID declaration before you can release an app that targets"
bytestream 17.02.2025
Рекламный идентификатор - это уникальный, но восстанавливаемый строковый идентификатор для каждого устройства Android. Думаю, вы удивитесь, но даже если ваше приложение не показывает рекламу. . .
Отличия App Router от Pages Router в Next.js
bytestream 17.02.2025
Next. js прошел длинный путь развития, и одним из самых значительных изменений стало появление App Router - революционного подхода к организации маршрутизации в приложении. Этот новый способ пришел на. . .
Топ10 лучших фреймворков JavaScript для изучения в 2025
bytestream 16.02.2025
В современной веб-разработке JavaScript занимает особое место, являясь одним из наиболее востребованных языков программирования. По мере развития веб-технологий появляется все больше фреймворков,. . .
Temporal в JavaScript - новый формат даты и времени
bytestream 16.02.2025
В мире JavaScript скоро произойдет значимое событие - появление нового встроенного объекта Temporal, который призван полностью заменить устаревший объект Date. Это революционное изменение в работе с. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru