1

我正在尝试使用 Bootstrap 制作一个流畅的响应式模板，但是每次页面在标题或段落中使用大量文本进行扩展时，或者当标题或段落中通常在 div 中存在大量文本时，它都会出现类是一个流畅的行....它在 div 之外将另一个 div 向下推。我该如何解决？http://img850.imageshack.us/img850/4238/screenshot20130228at114.png

 ![<div class="container-fluid">
      <div class="div-1">
        <div class="page-header">
          <h1>Page heading <small>Subheading</small>
          </h1>
        </div>
      </div>
      <div class="row-fluid">
        <span class="span3">
          <h1 class="heading">Headingaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
          <p>Lorem Ipsum...aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
        </span>
        <span class="span6">
          <h1 class="heading">Heading</h1>
          <p>Lorem Ipsum...</p>
        </span>
        <span class="span3">
          <h1 class="heading">Heading</h1>
          <p>Lorem Ipsum...</p>
        </span>
      </div>
    </div>
4

2 回答 2

4

这是一个简单的修复...

只需添加以下 CSS：

.row-fluid {
    word-wrap: break-word;  
}

加载这个 jsFiddle 示例，然后点击运行。只需拉伸结果框即可清楚地看到它。

jsFiddle 示例来修复非换行的长词

另请注意，在您的示例中，您的单词很长，没有中断，这就是它真正超出边缘的原因。大多数单词可能不会运行那么长时间。但是，假设你有“Supercalifragelousexpialidocious”这个词，可能需要这个修复。:)

于 2013-03-01T05:33:10.170 回答
0

使用这个 CSS 代码。它将从容器边界结束的地方断线

.test2
{
 word-break:break-all;
}
于 2013-03-01T05:04:49.500 回答