title: Make text-overflow ellipsis work similary in firefox and chrome
body: <p>I've created a layout to display some articles captions, and their statuses.
  The box for article name has fixed width, and I'm using text-overflow:ellipsis to cut too long articles names. Also, I'm adding lightgrey dotted line at the end of article's title (if it's not too long), to make the gap between title and status look better. </p>
  
  <p><strong>The problem is:</strong> Firefox sees, that conent (title + dotted block) is too long, and cuts it with ellipsis. At the same time, Chrome doenst do it, and work as I need it to.</p>
  
  <p>Screenshots:</p>
  
  <p><a href="https://i.stack.imgur.com/hgHE4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hgHE4.png" alt="enter image description here"></a></p>
  
  <p>For me, it's seems, that Chrome work in a wrong manner, but it's useful for me. And firefox is working just as it logically should - cut the content when it's too long. But, why does it cut it at the end of the text, not at the end of container (as it should, according to <a href="https://developer.mozilla.org/ru/docs/Web/CSS/text-overflow" rel="noreferrer">MDN</a>)?</p>
  
  <p>Maybe I'm using a hack, that I shouldn't, in this case, I'll be greateful, if you tell me another method of acheivement of such visual effect, as I have in chrome.</p>
  
  <p>minimal example:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p&gt;
      &lt;span class="left-block overflow-ellipsis"&gt;
          Very-very long article name, that would not fit in container
          &lt;span class='dots'&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class="right-block"&gt;
          Published
      &lt;/span&gt;
  &lt;/p&gt;
  &lt;p&gt;
      &lt;span class="left-block overflow-ellipsis"&gt;
          Not so long article name
          &lt;span class='dots'&gt;&lt;/span&gt;
      &lt;/span&gt;
      &lt;span class="right-block"&gt;
          Unpublished
      &lt;/span&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body
  {
      background-color:white;
  }
  
  span.left-block {
      display:inline-block;
      width: 300px;
      border: 1px solid white;
  
      white-space: nowrap;
      overflow: hidden;
      vertical-align:top;
  }
  
  span.left-block:hover
  {
      display:inline-block;
      border:1px solid red;
  }
  
  span.right-block
  {
      display:inline-block;
      vertical-align:top;
  }
  
  .dots
  {
      display:inline-block;
      border-bottom:1px dotted #ddd;
      width:300px;
  }
  
  .overflow-ellipsis {
      text-overflow: ellipsis;
  }
  </code></pre>
  
  <p>JsFiddle to play with: <a href="https://jsfiddle.net/ka4scx1h/3/" rel="noreferrer">https://jsfiddle.net/ka4scx1h/3/</a></p>
  
  <p>OS: Windows 7 SP1 x64</p>
  
  <p>Chrome version: 57.0.2987.133 (64-bit)</p>
  
  <p>Firefox version: 51.0.1 (32-bit)</p>
  
  <p>Thanks for your help in advance.</p>