Почему не происходит перенос строки внутри контейнера?

Question

[Johnny Gat]

Решил что 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>
            <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>

Вот полный код в "песочнице" tutorialspoint.com - tpcg.io/_J61SP0
Понадобится нажать кнопку "Preview" вверху слева

Подскажите, пожалуйста, как заставить контейнер переносить строку внутри, вместо того чтобы увеличиваться по ширине? Подойдет уже вариант и без использования Bootstrap.

PS №1:
Это не три разных контейнера. Это один контейнер и три примера его заполнения текстом. Контейнер может быть заполнен строками различной длины и мне нужно чтобы он корректно изменял свою ширину для любых вариантов.

PS №2:
1. Если внутри контейнера находится короткий текст, то ширина контейнера не должна быть более 200 пикселей
2. Если внутри контейнера находится длинный текст который не должен переноситься, то контейнер должен увеличить свою ширину
3. Если внутри контейнера находится длинный текст который должен переноситься, то ширина контейнера должна равняться ширине длинный текст который не должен переноситься, но не менее 200 пикселей. А длинный текст который должен переноситься - должен будет переносится на новые строки внутри этого контейнера.

Comments

[szQocks]

Подскажите, пожалуйста, как заставить контейнер переносить строку внутри, вместо того чтобы увеличиваться по ширине?

- текст вложиться в дополнительный тег, а этот тег сделать ограниченной шириной какой захочешь, относительно родителя

[Johnny Gat]

szQocks,

<div class="col">
    <div class="w-100">
        <span class="text-wrap">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span>
    </div>
</div>

вот вложенный тег, его ширина = 100% родителя, изменений нет

[szQocks]

Johnny Gat, ограничь ширину на сколько, на сколько тебе нужно, в чём проблема, зачем ты поставил 100%, сделай 50% например

[Johnny Gat]

szQocks, вы видимо сами не пробовали свой совет, но ничего, я попробовал его за вас. Вот посмотрите на результат (это 50%)

[szQocks]

Johnny Gat,

Подскажите, пожалуйста, как заставить контейнер переносить строку внутри, вместо того чтобы увеличиваться по ширине?

[Johnny Gat]

szQocks, как вы видите контейнер увеличился по ширине, что противоречит моему вопросу, следовательно ваш ответ неверен.

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4

[szQocks]

Johnny Gat, аааа, ну ты же задал минимальную ширину 200 пикселей, и хочешь что бы контейнер был меньше 200 пикселей ? странно всё это, зачем тогда задавать 200 пикселей, задай width: fit-content;

[Johnny Gat]

szQocks, нет, я не хочу чтобы контейнер был меньше 200 пикселей и не понимаю откуда вы это взяли. width: fit-content; не помог.

[szQocks]

Johnny Gat, аааа, я понял я понял о чём ты парень, сначала я не понял, но теперь я очень понял

<div class="col">
    <div class="w-100">
        <span class="text-wrap" style="max-width: 200px;">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span>
    </div>
</div>

[Johnny Gat]

szQocks, вы вообще свои советы проверяете или просто генерируете их?

<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>

^ изменений по сравнению с моим кодом - нет, контейнер продолжает увеличивать свою ширину вместо того чтобы переносить текст

[szQocks]

Johnny Gat, забыл что инлайн элементы игнорирует стили для ширины

span class="text-wrap" style="max-width:200px; display: block;">Строка 2 - длинная, но div не должен стать шире, он должен остаться 200px</span>

[Johnny Gat]

szQocks, спасибо. Подскажите, пожалуйста, возможно ли в принципе реализовать это так чтобы контейнер удовлетворял третьему пункту?
Если внутри контейнера находится длинный текст который должен переноситься, то ширина контейнера должна равняться ширине длинный текст который не должен переноситься, но не менее 200 пикселей. А длинный текст который должен переноситься - должен будет переносится на новые строки внутри этого контейнера.

[szQocks]

Johnny Gat,

Если внутри контейнера находится длинный текст который должен переноситься, то ширина контейнера должна равняться ширине длинный текст который не должен переноситься, но не менее 200 пикселей

- не в обиду, это ломает мне мозг, и я не в силах это понять, надеюсь кто-то другой подскажет

[Johnny Gat]

szQocks, хорошо, спасибо вам. Если опубликуете код

<span class="text-wrap" style="max-width:200px; display: block;">текст</span>

ответом - то отмечу его решением.