Перенос слов внутри лейбла к 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>

введите сюда описание изображения введите сюда описание изображения


Ответы (0 шт):