Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap modal horizontal text overflowing

With a large text input inside <p> tags the text overflows the bounds of the modal and off the screen requiring a horizontal scrollbar to read.

I've copied the example code from the Bootstrap documentation and simply added a long text string inside the modal-body section. The example on the Bootstrap documentation website seems to word wrap the 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>

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

I'm sure it's something simple and I've just been staring at it too long to notice! Any help would be much appreciated.

like image 360
peacemaker Avatar asked Sep 12 '13 15:09

peacemaker


1 Answers

One option would be 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/

like image 125
Adrift Avatar answered Sep 24 '22 08:09

Adrift