[英]Text always overflowing on the right in Bootstrap modal dialog
I have created a small dialog with UI Bootstrap that contains some basic text. 我使用UI Bootstrap创建了一个小对话框,其中包含一些基本文本。 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: 我在CSS中添加了以下stype属性:
.details-info-content {
overflow-wrap:break-word;
}
.modal-dialog {
width: 75%;
height: 70%;
}
but the problem persists. 但问题仍然存在。 Where is the error? 错误在哪里?
我认为您有错别字-溢出包装,而不是溢出包装
Try this 尝试这个
.details-info-content {
word-wrap: break-word;
}
.modal-dialog {
width: 75%;
height: 70%;
}
您可以简单地使用Bootstrap的text-wrap
类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.