文本溢出HTML复选框按钮

Question

我正在尝试将文本添加到我的复选框中，并希望将文字换行。但是，它只是一条线。我想确保内容符合框并增加框的高度。

复选框的图标应在我们选中后显示，例如最左边的那个图标＆＃34; Cakes ...＆＃34;

这是我的代码：

＆＃13;

＆＃13;

.searchable-container {
  margin: 20px 0 0 20px
}

.searchable-container label.btn-default.active {
  background-color: #007ba7;
  color: #FFF
}

.searchable-container label.btn-default {
  width: 120%;
  border: 1px solid #efefef;
  margin: 5px;
  box-shadow: 5px 8px 8px 0 #ccc;
}

.searchable-container label .bizcontent {
  width: 100%;
}

.searchable-container {
  word-wrap: break-word;
}

.searchable-container .btn-group {
  width: 120%
}

.searchable-container .btn span.glyphicon {
  opacity: 0;
}

.searchable-container .btn.active span.glyphicon {
  opacity: 1;
}

＆＃13;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="form-group">
      <div class="searchable-container">
        <div class="items col-xs-5 col-sm-5 col-md-3 col-lg-3 ">
          <div class="info-block block-info clearfix">

            <div data-toggle="buttons" class="btn-group bizmoduleselect">
              <label class="btn btn-default">
                                <div class="bizcontent">
                                    <input type="checkbox" name="var_id[]" autocomplete="off" value=""> Cakes, Return Gifts 
                                    <span class="glyphicon glyphicon-ok glyphicon-lg"> </span>
                                    
                                </div>
                            </label>
            </div>
          </div>
        </div>
        <div class="items col-xs-5 col-sm-5 col-md-3 col-lg-3 col-xs-offset-1">
          <div class="info-block block-info clearfix">

            <div data-toggle="buttons" class="btn-group bizmoduleselect">
              <label class="btn btn-default" style="white-space: normal;"> 
                                <div class="bizcontent">
                                    <input type="checkbox" name="var_id[]" autocomplete="off" value=""> Entertainment Magic Show, Games, Puppet Show
                                    <span class="glyphicon glyphicon-ok glyphicon-lg"> </span>
                                   
                                </div>
                            </label>
            </div>
          </div>
        </div>
        <div class="items col-xs-5 col-sm-5 col-md-3 col-lg-3 col-xs-offset-1">
          <div class="info-block block-info clearfix">

            <div data-toggle="buttons" class="btn-group bizmoduleselect">
              <label class="btn btn-default">
                                <div class="bizcontent">
                                    <input type="checkbox" name="var_id[]" autocomplete="off" value="">Decoration <br> Ballons, Flowers and any other requirements
                                    <span class="glyphicon glyphicon-ok glyphicon-lg"> </span>
                                    
                                </div>
                            </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

＆＃13;

＆＃13;

＆＃13;