文本超出流体div？ [复制]答案

【问题标题】：text going outside of fluid div? [duplicate]文本超出流体div？ [复制]
【发布时间】：2013-02-15 12:55:47
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

你能用jsfiddle.net复制这个吗，否则请把相关的css也放上去

标签： html css twitter-bootstrap grid

【解决方案1】：

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

只需添加以下 CSS：

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

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

jsFiddle example to fix the non-wrapping long words

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

【讨论】：

但你会认为，因为它包含在 DIV 中，它会在调整大小时自动中断，因为它位于 div 内部。我不明白为什么它会跑过去，我会试试你说的！谢谢。
我觉得你在那个。似乎它应该以这种方式工作，但 div 不会自动打破整个单词来包装它。这就是 word-wrap 属性的用武之地。它允许将长单词分解并换行到下一行。

【解决方案2】：

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

.test2
{
 word-break:break-all;
}

【讨论】：