流體div以外的文本？

我正在嘗試使用Bootstrap製作一個流體響應模板，但每次出現頁面擴展時都會出現大量文本在標題或段落內，或者在標題或段落中存在大量文本div這個類是一個流動性的行....它超出了推動其他股下跌的div。我該如何解決？ http://img850.imageshack.us/img850/4238/screenshot20130228at114.png 流體div以外的文本？

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

來源

2013-03-01 user2122206

您可以使用http://jsfiddle.net重現此或其他請將相關的css以及 – 2013-03-01 04:53:00

使用此css代碼。從其中容器邊界結束

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

來源

2013-03-01 05:04:49

這是一個簡單的解決這將打破行...

只需添加下面的CSS：

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

加載此的jsfiddle例子，然後點擊運行。只需拉伸結果框即可清楚地看到它。

jsFiddle example to fix the non-wrapping long words

另外請注意，在你的榜樣，你有一個長字，沒有休息，這就是爲什麼它實際上在邊緣運行。大多數話可能不會那麼長。但是，如果你有「Supercalifragelousexpialidocious」這個詞，可能需要這個修正。 :)

來源

2013-03-01 05:33:10

但你會認爲這是因爲它包含在DIV它會自動破壞，因爲它的大小調整考慮它是INSIDE div。我不明白爲什麼它跑完了就是這樣，我會給你說的一句話！謝謝。 – user2122206 2013-03-01 15:32:55

我覺得在那一個。似乎它應該以這種方式工作，但div不會自動打破整個單詞來包裝它。這是word-wrap屬性的用途。它允許長詞可以被分解並換行到下一行。 – 2013-03-03 07:39:55

流體div以外的文本？

回答

相關問題