title: How to constrain content to modal dialog width?
body: <p>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.</p>
  <p><a href="https://i.stack.imgur.com/ry5KO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ry5KO.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;div class=&quot;modal modal-backdrop&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; [ngStyle]=&quot;{display: shareLinkShowDialog ? 'block' : 'none'}&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                  &lt;h5 class=&quot;modal-title&quot;&gt;
                      Share Link to {{selectedHouseMember.getName()}}
                  &lt;/h5&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot; style=&quot;text-align: center;&quot;&gt;
                  &lt;p&gt;{{shareLink}}&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;button class=&quot;btn btn-warning&quot; (click)=&quot;toggleShareLinkDialog()&quot;&gt;
                      Close
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>