title: text-overflow: ellipsis with inline-block
body: <p>I have the following html code</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
        span {
          display:inline-block;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div style='width:60px; white-space:nowrap; overflow:hidden;
        text-overflow:ellipsis'&gt;
        &lt;span&gt;abc&lt;/span&gt; 
        &lt;span&gt;def&lt;/span&gt; 
        &lt;span&gt;ghi&lt;/span&gt; 
        &lt;span&gt;jkl&lt;/span&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The result looks like:</p>
  
  <blockquote>
    <p>abc def g 
    (the g is partially cropped)</p>
  </blockquote>
  
  <p>Question) How can I make it looks like:</p>
  
  <blockquote>
    <p>abc def g... </p>
  </blockquote>
  
  <p>Thanks in advance!</p>