title: Preventing line break after <span style="display:inline-block">
body: <p>In <code>&lt;span&gt;</code> elements in HTML narrative flow, in order to expand the area on which clicks are detected (some of the spans have content of only one character), I am adding padding (offsetting it with a negative margin) in  a class defined as</p>
  
  <pre><code>.expand-click-area {
      display:inline-block;
      padding:5px;
      margin:-5px;
      position:relative;
  }
  </code></pre>
  
  <p>This works fine in terms of the clicking behavior. The problem is that Chrome 19 will sometimes line break between the span and the following comma in a case such as the following:</p>
  
  <pre><code>&lt;span class="expand-click-area"&gt;this is span text&lt;/span&gt;,
  </code></pre>
  
  <p>Any thoughts on how to prevent this? Essentially, I would like breaking behavior equivalent to that when the <code>&lt;span&gt;</code> is not there at all, or does not have <code>display:inline-block</code>.</p>
  
  <p>This behavior does not seem to appear in IE10. See an example at <a href="http://jsfiddle.net/58XdJ/1/" rel="noreferrer">http://jsfiddle.net/58XdJ/1/</a>.</p>