I am currently developing Blaze, an application that utilizes the SE API to retrieve recent content. It is effective in identifying NAAs, but a particular issue arises when someone places extensive code or even an entire sentence within an inline code block:
Ideally, it should appear like this on a non-SO site:
Essentially, the inline code blocks fail to break, causing the td element to be displaced to the right. The following HTML markup 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 includes all the non-Bootstrap CSS used:
<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>
Is there a solution available to either (a) prioritize the td over the inline code blocks, or (b) enable the code blocks to wrap properly?