Why are my overflow ellipses being cut off in Chrome?

Question

At certain widths, my ellipses are being cut off. I've created a fiddle that demonstrates it. I've tried different combinations of margin and padding, but cannot seem to eliminate it. I'm using Chrome 51.

Note: I've simplified my example for brevity. My actual div is responsive, and the text is dynamic. I need a solution that will work for any text at any width.

Is there any way I can get around this issue?

<div class="container">
  <div class="nowrap">This text should be truncated</div>
</div>

<div class="container two">
  <div class="nowrap">This text should be truncated</div>
</div>

.container{
  width:196px;
  font-size:30px;
}

.container.two{
  width:193px;
}

.nowrap{
  text-overflow: ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

Answer 1

The issue that I created on Chromium got merged as a duplicate of this issue, which then got merged as a duplicate of this issue. I will update this answer as the status changes.

UPDATE: The issue does NOT appear in Canary, so a near-future release of Chrome should resolve the issue.

UPDATE 2: The issue has been resolved in Chrome 52.