如何将内容限制为模式对话框宽度？

Question

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

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

Answer 1

使用

宽度：100%； max-width:100%;

到parent

Answer 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

如何将内容限制为模式对话框宽度？

How to constrain content to modal dialog width?

html

css

modal-dialog

twitter-bootstrap-3

angular