Перенос слов внутри лейбла к input (bootstrap / элемент card-body)
Есть вот такая карточка, в нее из базы данных по очереди выводятся блюда, время все такое. Выполнено это в виде input-чекбокса с лейблом, в котором и сидит злосчастный текст. К сожалению, если название блюда слишком велико, он переносит лейбл под чекбокс, а не слова из лейбла на новую строчку. Перепробовал все вариации text-nowrap, text-break, word-break, но в лучшем случае лишний текст просто исчезал
<div class="card m-3 h-100" style="width: 26rem;">
<div class="card-body">
<h5 class="card-title">Понедельник</h5>
<p style="font-size: 1.3rem;">{{m}}</p>
<form method="POST" action="/delete">
<button type="button" id="toggle" class="btn btn-outline-primary mb-3 mr-3">Выбрать несколько</button>
<button type="submit" id="delete" class="btn btn-outline-danger mb-3" style="display: none;">Удалить</button>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="false">
Завтраки
</button>
</h5>
</div>
<div id="collapseOne" class="collapse">
<div class="card-body">
{%for i in MondayZ%}
<input name="checked" style="display: none;" class="checkbox" type="checkbox" id="{{ i[0] }}"
value="{{ i[0] }}/{{ i[3] }}/{{ i[2] }}/{{i[4]}}">
<label name="checked" for="{{ i[0] }}">{{ i[0] }} {{i[2]}}</label><br>
{%endfor%}
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
Обеды
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse">
<div class="card-body">
{%for i in MondayO%}
<input name="checked" style="display: none;" class="checkbox" type="checkbox" id="{{ i[0] }}"
value="{{ i[0] }}/{{ i[3] }}/{{ i[2] }}/{{i[4]}}">
<label name="checked" for="{{ i[0] }}">{{ i[0] }} {{i[2]}}</label><br>
{%endfor%}
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Ужины
</button>
</h5>
</div>
<div id="collapseThree" class="collapse">
<div class="card-body">
{%for i in MondayY%}
<input name="checked" style="display: none;" class="checkbox" type="checkbox" id="{{ i[0] }}"
value="{{ i[0] }}/{{ i[3] }}/{{ i[2] }}/{{i[4]}}">
<label name="checked" for="{{ i[0] }}">{{ i[0] }} {{i[2]}}</label><br>
{%endfor%}
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Перекусы
</button>
</h5>
</div>
<div id="collapseFour" class="collapse">
<div class="card-body">
{%for i in MondayP%}
<input name="checked" style="display: none;" class="checkbox" type="checkbox" id="{{ i[0] }}"
value="{{ i[0] }}/{{ i[3] }}/{{ i[2] }}/{{i[4]}}">
<label name="checked" for="{{ i[0] }}">{{ i[0] }} {{i[2]}}</label><br>
{%endfor%}
</div>
</div>
</div>
</div>
</form>
</div>
</div>

