title: Allow Bootstrap inline code block to break?
body: <p>I'm working on <a href="http://erwaysoftware.com/blaze" rel="nofollow noreferrer">Blaze</a>, an app that uses the SE API to grab recent content. It works great for finding NAAs, but there's one problem. When someone <code>has put a whole bunch of code or even an entire sentence in an inline code block</code>, this happens:</p>
  
  <p><img src="https://i.stack.imgur.com/FTflc.png" alt="enter image description here"></p>
  
  <p>When it should look like this (non-SO site):</p>
  
  <p><img src="https://i.stack.imgur.com/P2RsF.png" alt="enter image description here"></p>
  
  <p>Essentially, the inline code blocks aren't breaking, and thus are pushing the <code>td</code> out to the right. This is the HTML that is generated:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td style="vertical-align:top" class="col-md-1"&gt;
          &lt;div class="score"&gt;
              &lt;h2 style="color:rgba(0,0,0,0.6); pull:right"&gt;0&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/td&gt;
      &lt;td class=""&gt;
          &lt;div class="post col-md-9"&gt;
              &lt;h3&gt;&lt;a href="http://stackoverflow.com/questions/22561506/how-can-i-insert-php-into-a-webpage-using-javascript/22561707#22561707"&gt;How can I insert PHP into a webpage using Javascript&lt;/a&gt;&lt;/h3&gt;
              &lt;hr&gt;
              &lt;span class="post-body" style="color:rgba(70,70,70,1)"&gt;                    
                  &lt;p&gt;&lt;code&gt;Is it possible to insert PHP code into a webpage using javascript after the page has loaded?&lt;/code&gt; 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.&lt;/p&gt;
                  ...
              &lt;/span&gt;
              &lt;p style="color:grey; float:right"&gt;posted by &lt;a href="http://stackoverflow.com/users/2155068/mjrkusanagi"&gt;MjrKusanagi&lt;/a&gt; &lt;span&gt;a minute ago&lt;/span&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>This is all the non-Bootstrap CSS I'm using:</p>
  
  <pre><code>&lt;style&gt;
    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
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>Does anyone have any idea how to either (a) Make the <code>td</code> stronger than the inline <code>code</code> blocks, or (b) allow the code blocks to wrap?</p>