如何将内容限制为模态对话框宽度？答案

【问题标题】：How to constrain content to modal dialog width?如何将内容限制为模态对话框宽度？
【发布时间】：2020-09-13 07:18:01
【问题描述】：

我在模态对话框中有一长串文本，但文本没有换行或留在对话框内。我怎样才能解决这个问题？下面是一张图片和我的对话框模板。

<div class="modal modal-backdrop" tabindex="-1" role="dialog" [ngStyle]="{display: shareLinkShowDialog ? 'block' : 'none'}">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    Share Link to {{selectedHouseMember.getName()}}
                </h5>
            </div>
            <div class="modal-body" style="text-align: center;">
                <p>{{shareLink}}</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-warning" (click)="toggleShareLinkDialog()">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css angular twitter-bootstrap-3 modal-dialog

【解决方案1】：

使用

宽度：100%；最大宽度：100%；

给父母

【讨论】：

我是否将这种样式放在模态体上？
yes for modal-body ，这个问题通常发生在你没有为元素定义特定宽度时。
在此处输入您的模态体 css 样式
{{shareLink}}
我试过你的解决方案，我换了它为此并删除了
标签。我希望链接保持限制在 200 像素，但它仍然无法正常工作。

【解决方案2】：

<div class="modal-body" style="text-align: center; word-wrap: break-word;">
     <p>
        {{shareLink}}
     </p>
</div>

使用word-wrap: break-word; 让它工作。我引用了这个问题：html - Bootstrap modal horizontal text overflowing

【讨论】：