How to constrain content to modal dialog width?

Question

I have a long string of text in a modal dialog box, but the text does not wrap or stay inside the dialog. How can I fix this? Below is an image and my template for the dialog.

<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

use

width:100%; max-width:100%;

to parent

Answer 2

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

Got it working using word-wrap: break-word; . I referenced this question: html - Bootstrap modal horizontal text overflowing