Allow Bootstrap inline code block to break?

Question

I'm working on Blaze, an app that uses the SE API to grab recent content. It works great for finding NAAs, but there's one problem. When someone has put a whole bunch of code or even an entire sentence in an inline code block, this happens:

When it should look like this (non-SO site):

Essentially, the inline code blocks aren't breaking, and thus are pushing the td out to the right. This is the HTML that is generated:

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

This is all the non-Bootstrap CSS I'm using:

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

Does anyone have any idea how to either (a) Make the td stronger than the inline code blocks, or (b) allow the code blocks to wrap?

Answer 1

Bootstrap sets code whitespace to no-wrap by default. You can override this by simply overriding it with a value that allows for wrapping.

http://jsfiddle.net/nNry2/

CSS

code {
    white-space: normal;    
}

Answer 2

I used a variation of @thgaskell's answer, taken from here (changing pre to 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+ */
}