Bootstrap模式对话框中右侧的文本总是溢出

Question

我创建了一个带有UI Bootstrap的小对话框，其中包含一些基本文本。当文本内容太大时，文本内容总是溢出。这是代码：

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

我在CSS中添加了以下stype属性：

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

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

但问题仍然存在。错误在哪里？

Answer 1

我认为你有一个错字 - 溢出 - 包裹，而不是溢出 -

Answer 2

试试这个

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

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

Answer 3

您可以简单地使用Bootstrap的add类。