Loading modal horizontal text overflowing

Question

With a large input of text inside the <p> tags, the text overflows the boundaries of the modal and from the screen, which require reading the horizontal scroll bar.

I copied the sample code from the Bootstrap documentation and simply added a long text string inside the modal-body section. An example on the Bootstrap documentation website seems like the word is wrapping text correctly, but my code does not.

Here is my markup:

 <div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 id="myModalLabel" class="modal-title">Modal Test</h4> </div> <div class="modal-body"> <p>Details below:</p> <p>TEST: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button> </div> </div> </div> </div> p> <div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 id="myModalLabel" class="modal-title">Modal Test</h4> </div> <div class="modal-body"> <p>Details below:</p> <p>TEST: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Done</button> </div> </div> </div> </div> 

You can also see what I mean by horizontal overflow on jsFiddle created here: http://jsfiddle.net/pX39W/11/

I'm sure this is something simple, and I just looked at it too long to notice! Any help would be greatly appreciated.

Answer 1

One option is to use the word-wrap property (assuming the text is one long word):

 .modal-body p { word-wrap: break-word; } 

http://jsfiddle.net/pX39W/12/