Bootstrap模态水平文本溢出 [英] Bootstrap modal horizontal text overflowing

问题描述

在< p> 标记内输入大量文本时，文本溢出了模态的边界，并超出了屏幕，需要水平滚动条才能读取。

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.

我从Bootstrap文档中复制了示例代码，并在 modal-body 部分中简单地添加了一个长文本字符串。 Bootstrap文档网站上的示例似乎可以自动将文字自动换行，但我的代码却不能。

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.

这是我的标记：

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

您还可以确切地看到我在这里创建的jsFiddle上的水平溢出的含义： http://jsfiddle.net/pX39W/11/

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.

推荐答案

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

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/

这篇关于Bootstrap模态水平文本溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！