Text always overflowing on the right in Bootstrap modal dialog

Question

I have created a small dialog with UI Bootstrap that contains some basic text. The text content always overflow on the right when it's too large. Here is the code:

<div>
    <script type="text/ng-template" id="/panel-list/panel-list.details-template.html">
        <div class="modal-header">
            <h3 class="modal-title">{{panel.name}}</h3>
        </div>
        <div class="modal-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-1">
                        <img src={{panel.image_url}} id="img-beer">
                    </div>
                    <div class="col-sm-10 col-md-10 col-lg-10 details-info-content">
                        <p>
                            {{panel.description}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">Close</button>
        </div>
    </script>
</div> 

I have added in the CSS the following stype property:

.details-info-content {
   overflow-wrap:break-word;
}

.modal-dialog {
   width: 75%;
   height: 70%;
}

but the problem persists. Where is the error?

Answer 1

我认为您有错别字-溢出包装，而不是溢出包装

Answer 2

Try this

 .details-info-content {
   word-wrap: break-word;
  }

 .modal-dialog {
   width: 75%;
   height: 70%;
 }

Answer 3

您可以简单地使用Bootstrap的text-wrap类。