Почему не происходит перенос строки внутри контейнера?
Решил что Bootstrap со своими готовыми классами (в частности класс text-wrap) мне поможет, но нет.
Если внутри контейнера находится короткий текст, то ширина контейнера не ужимается мене чем 200 пикселей, это правильно:
<div class="row"> <div class="col-auto"> <div class="border border-black" style="min-width:200px;"> <div class="row"> <div class="col">Строка 1 - короткая</div> </div> <div class="row"> <div class="col"><span class="text-wrap">Строка 2 - короткая</span></div> </div> </div> </div> </div> |
<div class="row"> <div class="col-auto"> <div class="border border-black" style="min-width:200px;"> <div class="row"> <div class="col">Строка 1 - короткая</div> </div> <div class="row"> <div class="col"><span class="text-wrap">Строка 2 - короткая</span></div> </div> </div> </div> </div>
Если внутри контейнера находится длинный текст который не должен переноситься, то контейнер увеличивает свою ширину, это тоже правильно:
<div class="row"> <div class="col-auto"> <div class="border border-black" style="min-width:200px;"> <div class="row"> <div class="col">Строка 1 - длинная, div должен стать шире</div> </div> <div class="row"> <div class="col"><span class="text-wrap">Строка 2 - короткая</span></div> </div> </div> </div> </div> |
<div class="row"> <div class="col-auto"> <div class="border border-black" style="min-width:200px;"> <div class="row"> <div class="col">Строка 1 - длинная, div должен стать шире</div> </div> <div class="row"> <div class="col"><span class="text-wrap">Строка 2 - короткая</span></div> </div> </div> </div> </div>
Проблема в том что контейнер увеличивает свою ширину игнорируя класс "text-wrap". То есть вместо того чтобы остаться шириной 200 пикселей и переносить по словам длинную строку, контейнер не переносит строку, а увеличивает свою ширину:
<div class="row"> <div class="col-auto"> <div class="border border-black" style="min-width:200px;"> <div class="row"> <div class="col">Строка 1 - короткая</div> </div> <div class="row"> <div class="col"><span class="text-wrap">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span></div> </div> </div> </div> </div> |
<div class="row"> <div class="col-auto"> <div class="border border-black" style="min-width:200px;"> <div class="row"> <div class="col">Строка 1 - короткая</div> </div> <div class="row"> <div class="col"><span class="text-wrap">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span></div> </div> </div> </div> </div>
Вот полный код в "песочнице" tutorialspoint.com - tpcg.io/_J61SP0
Понадобится нажать кнопку "Preview" вверху слева
Подскажите, пожалуйста, как заставить контейнер переносить строку внутри, вместо того чтобы увеличиваться по ширине? Подойдет уже вариант и без использования Bootstrap.
PS №1:
Это не три разных контейнера. Это один контейнер и три примера его заполнения текстом. Контейнер может быть заполнен строками различной длины и мне нужно чтобы он корректно изменял свою ширину для любых вариантов.
PS №2:
1. Если внутри контейнера находится короткий текст, то ширина контейнера не должна быть более 200 пикселей
2. Если внутри контейнера находится длинный текст который не должен переноситься, то контейнер должен увеличить свою ширину
3. Если внутри контейнера находится длинный текст который должен переноситься, то ширина контейнера должна равняться ширине длинный текст который не должен переноситься, но не менее 200 пикселей. А длинный текст который должен переноситься - должен будет переносится на новые строки внутри этого контейнера.
Дополнительно:
Подскажите, пожалуйста, как заставить контейнер переносить строку внутри, вместо того чтобы увеличиваться по ширине?
- текст вложиться в дополнительный тег, а этот тег сделать ограниченной шириной какой захочешь, относительно родителя
<div class="col"> <div class="w-100"> <span class="text-wrap">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span> </div> </div> |
<div class="col"> <div class="w-100"> <span class="text-wrap">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span> </div> </div>
вот вложенный тег, его ширина = 100% родителя, изменений нет
Подскажите, пожалуйста, как заставить контейнер переносить строку внутри, вместо того чтобы увеличиваться по ширине?
См.п.3.1 Регламента. Также обратите внимание на п.3.4
<div class="col"> <div class="w-100"> <span class="text-wrap" style="max-width: 200px;">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span> </div> </div> |
<div class="col"> <div class="w-100"> <span class="text-wrap" style="max-width: 200px;">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span> </div> </div>
<div class="row"> <div class="col"> <div class="w-100"> <span class="text-wrap" style="max-width:200px!important;">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span> </div> </div> </div> |
<div class="row"> <div class="col"> <div class="w-100"> <span class="text-wrap" style="max-width:200px!important;">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span> </div> </div> </div>
^ изменений по сравнению с моим кодом - нет, контейнер продолжает увеличивать свою ширину вместо того чтобы переносить текст
span class="text-wrap" style="max-width:200px; display: block;">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span> |
span class="text-wrap" style="max-width:200px; display: block;">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span>
Если внутри контейнера находится длинный текст который должен переноситься, то ширина контейнера должна равняться ширине длинный текст который не должен переноситься, но не менее 200 пикселей. А длинный текст который должен переноситься - должен будет переносится на новые строки внутри этого контейнера.
Если внутри контейнера находится длинный текст который должен переноситься, то ширина контейнера должна равняться ширине длинный текст который не должен переноситься, но не менее 200 пикселей
- не в обиду, это ломает мне мозг, и я не в силах это понять, надеюсь кто-то другой подскажет
<span class="text-wrap" style="max-width:200px; display: block;">текст</span> |
<span class="text-wrap" style="max-width:200px; display: block;">текст</span>
ответом - то отмечу его решением.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с отсутствием переноса строк внутри контейнера может быть вызвана несколькими причинами. Возможно, у вас не правильно настроены стили CSS для контейнера, либо внутренние элементы не имеют свойства, разрешающие перенос строк. Давайте рассмотрим несколько возможных решений для данной проблемы:
1. Проверьте стили CSS для контейнера и убедитесь, что для свойства `white-space` установлено значение `normal` или `pre-line`. Это позволит контейнеру автоматически переносить строки внутри себя.
.container { white-space: normal; }
2. Убедитесь, что внутренние элементы контейнера имеют достаточную ширину для отображения текста с переносом строк. Если ширина элемента ограничена, то текст может выходить за его границы.
3. Если вы используете элементы блочного уровня внутри контейнера, убедитесь, что у них установлено свойство `display: block;`, чтобы они правильно отображались и переносили строки.
4. Проверьте, что текст внутри контейнера действительно содержит символы, требующие переноса строки. Иногда текст может быть записан без пробелов или символов, которые могут быть разделителями для переноса.
Применяя вышеперечисленные рекомендации, вы должны смочь решить проблему отсутствия переноса строк внутри контейнера. Если проблема все еще остается, рекомендуется более подробно изучить стили CSS и структуру HTML элементов в вашем коде.