Question

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

Answer 1

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

只需添加以下CSS：

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

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

jsFiddle example to fix the non-wrapping long words

另请注意，在您的示例中，您有一个没有中断的长词，这就是为什么它真正在边缘运行。大多数单词可能不会运行那么久。但是，假设你有“Supercalifragelousexpialidocious”这个词可能需要这个修复。：）

Answer 2

使用此css代码。它将从容器边界结束处断开线

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

文本走出流体div？

2 个答案: