允许Bootstrap内联代码块中断？

Question

我正在使用Blaze，这是一款使用SE API来抓取最新内容的应用。它非常适合寻找NAA，但存在一个问题。当有人has put a whole bunch of code or even an entire sentence in an inline code block时，会发生这种情况：

当它看起来像这样（非SO网站）时：

基本上，内联代码块不会中断，因此会将td推向右侧。这是生成的HTML：

<tr>
    <td style="vertical-align:top" class="col-md-1">
        <div class="score">
            <h2 style="color:rgba(0,0,0,0.6); pull:right">0</h2>
        </div>
    </td>
    <td class="">
        <div class="post col-md-9">
            <h3><a href="http://stackoverflow.com/questions/22561506/how-can-i-insert-php-into-a-webpage-using-javascript/22561707#22561707">How can I insert PHP into a webpage using Javascript</a></h3>
            <hr>
            <span class="post-body" style="color:rgba(70,70,70,1)">                    
                <p><code>Is it possible to insert PHP code into a webpage using javascript after the page has loaded?</code> The simple answer is no. The page has already been rendered, the only way to change it is using javascript running within the user's browser.</p>
                ...
            </span>
            <p style="color:grey; float:right">posted by <a href="http://stackoverflow.com/users/2155068/mjrkusanagi">MjrKusanagi</a> <span>a minute ago</span></p>
        </div>
    </td>
</tr>

这是我使用的所有非Bootstrap CSS：

<style>
  img 
  {
      max-width:100%;
  }
  html, body 
  {
      height: 100%;
  }
  #wrap 
  {
      min-height: 100%;
      height: auto;
      margin: 0 auto -50px;
      padding: 0 0 50px;
  }
  #footer 
  {
      height: 50px;
      background-color: clear; 
      border-top:1px dashed rgba(0,0,0,0.2);
  }
  .navbar .navbar-nav 
  {
      display: inline-block;
      float: none;
  }
  .navbar .navbar-collapse 
  {
      text-align: center;
  }
  .flag-button:hover 
  {
      background-color:red; 
      color: white
  }
</style>

有没有人知道如何（a）使td强于内联code块，或者（b）允许代码块换行？

Answer 1

默认情况下，Bootstrap将code空格设置为no-wrap。您可以通过简单地使用允许换行的值覆盖它来覆盖它。

http://jsfiddle.net/nNry2/

CSS

code {
    white-space: normal;    
}

Answer 2

我使用了@thgaskell答案的变体，取自here（将pre更改为code）。

/* Browser specific (not valid) styles to make preformatted text wrap */        

code {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}