Html Bootstrap 模态水平文本溢出

Bootstrap modal horizontal text overflowing

提问by peacemaker

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.

在<p>标签内输入大文本时，文本会溢出模态的边界并离开屏幕，需要水平滚动条才能阅读。

I've copied the example code from the Bootstrap documentation and simply added a long text string inside the modal-bodysection. The example on the Bootstrap documentation website seems to word wrap the text correctly but my code does not.

我已经从 Bootstrap 文档中复制了示例代码，并在该modal-body部分中添加了一个长文本字符串。Bootstrap 文档网站上的示例似乎正确地对文本进行了自动换行，但我的代码却没有。

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/

您还可以确切地看到我在这里创建的 jsFiddle 上的水平溢出是什么意思：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.

我相信这很简单，我只是盯着它看了太久而没有注意到！任何帮助将非常感激。

回答by adrift

One option would be to use the word-wrapproperty (assuming the text is one long word):

一种选择是使用该word-wrap属性（假设文本是一个长词）：

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

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

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