Modal body text exceeds width of modal in Bootstrap 4 - css

Question

I'm trying to upgrade my site from Bootstrap 3 to Bootstrap 4. When I changed to Bootstrap 4, now a URL that is inside the modal-body exceeds the width of the modal. As far as I can tell the syntax of the modal is correct for Bootstrap 4, so I'm not sure why the modal width isn't stretching to fit the URL like it did in Bootstrap 3.
Here is a screenshot with the URL circled in yellow: URL too wide
Here is the code:
<?php
echo "<div class='modal fade' id='$p->fldHref' tabindex='-1' role='dialog' aria-labelledby='$p->fldModalLabel'>
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h3 class='modal-title' id='$p->fldModalLabel'>$p->fldModalTitle</h3>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>
</div>
<div class='modal-body'>
<p>".html_entity_decode($p->fldModalBody)."</p>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default btn-sm' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>"
?>

Answer 1

use whitespace css property. here is an example: https://www.w3schools.com/cssref/pr_text_white-space.asp
here is playground: https://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre
Check what is specified on your code with inspect element and try with whitespace -> It should solve

Answer 2

Use CSS word-break: break-word; for .modal-body and to do that add another class with it (.modal-body) or better if you add another div inside and use word-break: break-word; in that (like the snippet below), whenever you do word-break: break-word; could be the solution-
.modal-body-content {
word-break: break-word
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, quasi quidem magnam?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body-content">
<p>Lorem ipsum, dolor, sit amet consectetur adipisicing elit. Quo amet, ullam aliquam!</p>
<p>Excepturi magnam, rerum explicabo dolorum vel quo, qui! Necessitatibus non nulla, nostrum.</p>
https://www.google.com/search?q=pgbjr+oijfgboiwn+ogmn+wigj+oiwm+igjbioijeaifo+i+ijerijkoferfgjo&rlz=1C1CHBD_enBD924BD924&oq=pgbjr+oijfgboiwn+ogmn+wigj+oiwm+igjbioijeaifo+i+ijerijkoferfgjo&aqs=chrome..69i57.4620j0j7&sourceid=chrome&ie=UTF-8
<p>Ipsa cumque dignissimos odio optio deleniti ab, iste consequuntur rerum, obcaecati repellat?</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>