modal-body text flows out - word wrap not working

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">&times;</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.

Possible duplicate of [How do I wrap text in a pre tag?](https://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag) — dutchess, Jun 07 '19 at 09:25
@NishargShah - i have added `white-space: pre;` tag. but still its overflowing. I have attached the recent screenshot. — Karthikeyan, Jun 07 '19 at 09:46
can you share your full code ? IN HTML or in angular you can make stackblitz — Nisharg Shah, Jun 07 '19 at 09:47
@NishargShah - Am unsure about stackblitz...`
{{history.comment}}
`.. This was my recent change.. but still its not working as expected — Karthikeyan, Jun 07 '19 at 11:33
@Karthikeyan stackblitz is online vs code editor when you can save project and share with other person — Nisharg Shah, Jun 07 '19 at 11:35
edit your question and update your code, if your project is big and you cant share your code, send particular part of your code — Nisharg Shah, Jun 07 '19 at 11:39
@NishargShah - I have pointing the exact line., where am getting the text overflow issue. — Karthikeyan, Jun 07 '19 at 11:43
I added my answer look out it and if its not working tell me — Nisharg Shah, Jun 07 '19 at 11:56

curiosity · Answer 1 · 2019-06-07T09:57:03.380

0

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

edited Jun 07 '19 at 09:57

answered Jun 07 '19 at 09:29

curiosity

834
8
20

score 0 · Answer 2 · answered Jun 07 '19 at 11:49

0

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

answered Jun 07 '19 at 11:49

Nisharg Shah

16,638
10
62
73

this is not working., please find my complete html file with static data – Karthikeyan Jun 07 '19 at 13:12
how can I find it, you cant give us file of it ? – Nisharg Shah Jun 07 '19 at 13:19
https://chat.stackoverflow.com/rooms/info/194597/chat-room-of-nisharg-shah-and-karthikeyan?tab=general join this – Nisharg Shah Jun 07 '19 at 13:21

score 0 · Answer 3 · edited May 02 '20 at 21:31

0

Use code below will resolve this issue

style={{ whiteSpace: 'unset' }}

edited May 02 '20 at 21:31

keikai

14,085
9
49
68

answered May 02 '20 at 20:05

Ajay Shukla

1

modal-body text flows out - word wrap not working

3 Answers3