modal-body text flows out - word wrap not working - html

Question

I have created the modal pop-up screen and am display some text from database. In that some of the text are very long and it is going out of the modal screen window.
am using <pre ng-bind-html="history.comment" class="wrap-word"> tag but, still it over flow.
Please find my html code below.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="form-group row">
<div>
<table class="table">
<tr >
<td >
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<label>Action:</label>
</div>
<div id="action" class="col-lg-10">Approved</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<label>User:</label>
</div>
<div id="Name" class="col-lg-10">Karthikeyan</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<label>Comment</label>
</div>
<div id="comment" class="col-lg-10">
<div id="Name" class="col-lg-10">Karthikeyanaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Please find the attached screenshot also.
Please find the update screen shot with more information about <pre> tag.

Answer 1

Your grid layout doesn't recognized because you use table try to add this code at the top your table tag.
<div class='table table-responsive'>
<table class="table">
</table>
</div>
or try to add this css to your comment section
style="word-wrap: break-word;"

Answer 2

Try this thing, there is the most common issue of overflowing, give the static class to your text to perform task on it
.modal-body #historyComment_0 {
word-wrap: break-word;
}

Answer 3

Use code below will resolve this issue
style={{ whiteSpace: 'unset' }}